设备管理，设备列表，客户列表功能完善提交
This commit is contained in:
fengerli
@ -126,7 +126,7 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="loadingIng">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@ -151,7 +151,7 @@ const initPassword = ref<string>('');
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const userFormRef = ref<ElFormInstance>();
|
||||
const formDialogRef = ref<ElDialogInstance>();
|
||||
|
||||
const loadingIng = ref(false)
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
@ -224,7 +224,7 @@ const handleDelete = async (row?: UserVO) => {
|
||||
return;
|
||||
}
|
||||
// 单行删除逻辑
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.nickName + '"的数据项？') as any);
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.typeName + '"的数据项？') as any);
|
||||
if (!err) {
|
||||
await api.deleteDeviceType([row.id]);
|
||||
await getList();
|
||||
@ -281,10 +281,12 @@ const handleUpdate = async (row?: UserForm) => {
|
||||
const submitForm = () => {
|
||||
userFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
loadingIng.value = true;
|
||||
form.value.id ? await api.updateDeviceType(form.value) : await api.addDeviceType(form.value);
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
loadingIng.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -14,19 +14,19 @@
|
||||
<el-form-item label="请输入设备IMEI" prop="deviceImei">
|
||||
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="typeName">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="typeName">
|
||||
<el-form-item label="设备状态" prop="deviceStatus">
|
||||
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" style="margin-left: 10px;">
|
||||
<el-option label="正常" value="1" />
|
||||
<el-option label="失效" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="typeName">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
|
||||
@ -51,9 +51,23 @@
|
||||
修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
|
||||
删除
|
||||
<el-button type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain :disabled="multiple" @click="handleDelete()">
|
||||
批量删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain @click="handleBatchImport">
|
||||
批量导入
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain :disabled="multiple" @click="handleBatchAssign">
|
||||
批量分配客户
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:show-search="showSearch" :search="true" @query-table="getList"></right-toolbar>
|
||||
@ -64,11 +78,14 @@
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column prop="customerName" label="所属客户" />
|
||||
<el-table-column prop="devicePic" label="设备图片" width="80">
|
||||
<el-table-column prop="devicePic" label="设备图片">
|
||||
<template #default="scope">
|
||||
<el-popover trigger="click">
|
||||
<img :src="scope.row.devicePic" class="img1" />
|
||||
<img slot="reference" :src="scope.row.devicePic" class="img2" style="width:40px;height:40px;">
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<img :src="scope.row.devicePic" style="width: 40px; height: 40px; cursor: pointer;"
|
||||
class="hover:opacity-80 transition-opacity" />
|
||||
</template>
|
||||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px;" />
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -90,10 +107,10 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column prop="createTime" label="创建日期" width="160" />
|
||||
<el-table-column prop="createByName" label="创建人" />
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip v-if="scope.row.id !== 1" content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
@ -101,6 +118,17 @@
|
||||
<el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip :disabled="scope.row.deviceStatus === 0" content="分配" placement="top">
|
||||
<el-button link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.customerName" :disabled="scope.row.deviceStatus === 0" content="撤回"
|
||||
placement="top">
|
||||
<el-button link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
|
||||
|
||||
<el-button v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0"
|
||||
@click="handleUnbind(scope.row)">解绑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -122,22 +150,23 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备类型" prop="typeName">
|
||||
<el-select v-model="form.deviceType" placeholder="设备类型">
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="form.deviceType" placeholder="设备类型" @change="id => handleDeviceTypeChange(id)"
|
||||
:disabled="form.id != ''">
|
||||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-row v-if="showMacField">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备MAC" prop="deviceMac">
|
||||
<el-input v-model="form.deviceMac" placeholder="请输入设备MAC" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-row v-if="showImeiField">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设备IMEI" prop="deviceImei">
|
||||
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
|
||||
@ -151,9 +180,9 @@
|
||||
:http-request="httpRequestImg" :file-list="fileList" :limit="1">
|
||||
<i class="el-icon-plus"></i>
|
||||
<template v-if="form.image && typeof form.image === 'string'">
|
||||
<img :src="form.image" class="avatar" />
|
||||
<img :src="form.image" class="avatar" style="width:100px; height:100px;" />
|
||||
</template>
|
||||
<i v-else class="el-icon-plus"></i>
|
||||
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -168,11 +197,73 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="loadingIng">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 分配客户弹窗 -->
|
||||
<el-dialog v-model="assignDialogVisible" title="分配客户" width="400px">
|
||||
<el-form>
|
||||
<el-form-item label="选择客户">
|
||||
<el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%">
|
||||
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
|
||||
:value="item.customerId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="assignDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleAssignConfirm" :loading="loadingIng">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 导入设备数据弹窗 -->
|
||||
<el-dialog v-model="importDialogVisible" title="导入设备数据" width="500px">
|
||||
<div style="margin-bottom: 16px;">
|
||||
<p>请按照模板文件的格式准备需要导入的数据。</p>
|
||||
<p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p>
|
||||
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button>
|
||||
</div>
|
||||
<el-upload ref="importUpload" :action="api.devicDeimport()" :headers="head_upload()" :show-file-list="false"
|
||||
:before-upload="beforeImportUpload" :on-success="handleImportSuccess" :on-error="handleImportError" :limit="1"
|
||||
accept=".xlsx,.xls">
|
||||
<el-button type="success">选择文件开始导入</el-button>
|
||||
<div v-if="!importResult.isShow" slot="tip" class="el-upload__tip">
|
||||
<div style="color:#409EFF">只能上传模板excel文件</div>
|
||||
</div>
|
||||
<div v-if="importResult.isShow" slot="tip" class="el-upload__tip">
|
||||
<span style="color:#409EFF">批量导入完成，共检测到 <span style="color:#E6A23C">{{ importResult.total }}</span>
|
||||
条数据，导入成功 <span style="color:#67C23A">{{ importResult.succeed }}</span> 条，失败 <span style="color:red">{{
|
||||
importResult.errorSun }}</span> 条。</span>
|
||||
<p v-if="importResult.errorSun > 0" style="padding:10px;"><a :href="importResult.link">>>>
|
||||
上传失败明细下载 <i class="el-icon-download" /></a></p>
|
||||
</div>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="importDialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 批量分配客户弹窗 -->
|
||||
<el-dialog v-model="batchAssignDialogVisible" title="批量分配客户" width="400px">
|
||||
<el-form>
|
||||
<el-form-item label="选择客户">
|
||||
<el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%">
|
||||
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
|
||||
:value="item.customerId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="batchAssignDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleBatchAssignConfirm">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -182,6 +273,8 @@ import { deviceForm, deviceQuery, deviceVO } from '@/api/equipmentManagement/dev
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const deviceDist = ref<deviceVO[]>();
|
||||
import { to } from 'await-to-js';
|
||||
import request from "@/utils/request";
|
||||
import { getBearerToken } from '@/utils/auth'
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
@ -194,7 +287,17 @@ const queryFormRef = ref<ElFormInstance>();
|
||||
const userFormRef = ref<ElFormInstance>();
|
||||
const formDialogRef = ref<ElDialogInstance>();
|
||||
const deviceTypeOptions = ref([]); //设备类型
|
||||
|
||||
const fileList = ref()
|
||||
const communicationModeInfo = ref<any>(null);
|
||||
const showMacField = ref(false); //MAC地址
|
||||
const showImeiField = ref(false); //mei地址
|
||||
const assignDialogVisible = ref(false); //分配客户
|
||||
const importDialogVisible = ref(false);//批量导入
|
||||
const batchAssignDialogVisible = ref(false) //批量分配客户
|
||||
const loadingIng = ref(false)
|
||||
const assignCustomerId = ref(); //分配客户id
|
||||
const batchAssignCustomerId = ref() //批量分配客户id
|
||||
const customerList = ref()
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
@ -207,7 +310,7 @@ const initFormData: deviceForm = {
|
||||
remark: '',
|
||||
id: '',
|
||||
deviceType: "",
|
||||
image:''
|
||||
image: ''
|
||||
};
|
||||
|
||||
const initData: PageData<deviceForm, deviceQuery> = {
|
||||
@ -229,12 +332,6 @@ const initData: PageData<deviceForm, deviceQuery> = {
|
||||
deviceType: [
|
||||
{ required: true, message: '请选择设备类型', trigger: 'blur' },
|
||||
],
|
||||
deviceMac: [
|
||||
{ required: true, message: '请输入设备MAC', trigger: 'blur' },
|
||||
],
|
||||
deviceImei: [
|
||||
{ required: true, message: '请输入设备IMEI', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
const data = reactive<PageData<deviceVO, deviceQuery>>(initData);
|
||||
@ -256,9 +353,9 @@ const handleQuery = () => {
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
|
||||
queryFormRef.value?.resetFields();
|
||||
dateRange.value = ['', ''];
|
||||
handleQuery()
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
@ -275,13 +372,63 @@ const handleDelete = async (row?: deviceVO) => {
|
||||
return;
|
||||
}
|
||||
// 单行删除逻辑
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.nickName + '"的数据项？') as any);
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.deviceName + '"的数据项？') as any);
|
||||
if (!err) {
|
||||
await api.deleteDevice([row.id]);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
}
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'/api/device/download',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`${new Date().getTime()}.xlsx`,
|
||||
'get'
|
||||
);
|
||||
};
|
||||
// 解绑
|
||||
const handleUnbind = (row) => {
|
||||
proxy?.$modal.confirm(`确定要解绑设备 ${row.deviceName} 吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
api.deviceUnbind(row).then(res => {
|
||||
if (res.code === 0) {
|
||||
proxy?.$modal.msgSuccess('解绑成功')
|
||||
getList(); // 初始化列表数据
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg || '解绑失败')
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
};
|
||||
// 撤回
|
||||
const handleWithdraw = (row: any) => {
|
||||
proxy?.$modal.confirm(`确定要从客户 ${row.customerName} 撤回设备 ${row.deviceName} 吗？`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
api.withdrawDevice([row.id]).then(res => {
|
||||
if (res.code === 0) {
|
||||
proxy?.$modal.msgSuccess('撤回成功')
|
||||
getList(); // 初始化列表数据
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg || '撤回失败')
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
proxy?.$modal.msgError('已取消撤回')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/** 选择条数 */
|
||||
const handleSelectionChange = (selection: deviceVO[]) => {
|
||||
@ -295,6 +442,7 @@ const handleSelectionChange = (selection: deviceVO[]) => {
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
userFormRef.value?.resetFields();
|
||||
fileList.value = []
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
@ -308,6 +456,9 @@ const handleAdd = async () => {
|
||||
dialog.visible = true;
|
||||
dialog.title = '新增设备';
|
||||
form.value.password = initPassword.value.toString();
|
||||
// 新增时默认不显示
|
||||
showMacField.value = false;
|
||||
showImeiField.value = false;
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
@ -317,93 +468,163 @@ const handleUpdate = async (row?: deviceForm) => {
|
||||
dialog.title = '修改设备';
|
||||
try {
|
||||
if (row) {
|
||||
// 从行内按钮调用，直接使用行数据
|
||||
Object.assign(form.value, row);
|
||||
form.value.image = row.devicePic
|
||||
// 编辑时根据已有值显示字段
|
||||
showMacField.value = !!row.deviceMac;
|
||||
showImeiField.value = !!row.deviceImei;
|
||||
} else {
|
||||
const customerId = ids.value[0];
|
||||
Object.assign(form.value, customerId);
|
||||
form.value.image = customerId.devicePic //图片回显
|
||||
// 编辑时根据已有值显示字段
|
||||
showMacField.value = !!customerId.deviceMac;
|
||||
showImeiField.value = !!customerId.deviceImei;
|
||||
}
|
||||
// 加载设备类型对应的通讯方式
|
||||
if (form.value.deviceType) {
|
||||
await handleDeviceTypeChange(form.value.deviceType);
|
||||
}
|
||||
} catch (error) {
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
// 覆盖默认的上传行为，可以自定义上传的实现
|
||||
const httpRequestImg=(parm)=> { };
|
||||
const beforeUpload=(file)=> {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
|
||||
if (!isJPG) {
|
||||
ElMessage.warning("请上传jpg、png格式，大小不超过2M的照片");
|
||||
return false;
|
||||
// 设备类型触发事件
|
||||
const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
||||
// 重置规则和显示状态
|
||||
rules.value.deviceMac = [];
|
||||
rules.value.deviceImei = [];
|
||||
showMacField.value = false;
|
||||
showImeiField.value = false;
|
||||
communicationModeInfo.value = null;
|
||||
|
||||
// 编辑时如果有值，根据已有值确定显示哪个字段
|
||||
if (form.value.id) {
|
||||
if (form.value.deviceMac) {
|
||||
showMacField.value = true;
|
||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||
} else if (form.value.deviceImei) {
|
||||
showImeiField.value = true;
|
||||
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
|
||||
}
|
||||
return;
|
||||
}
|
||||
// 新增或编辑时没有值，根据设备类型获取通讯方式
|
||||
try {
|
||||
userFormRef.value?.clearValidate(['deviceMac', 'deviceImei']);
|
||||
if (!deviceTypeId) {
|
||||
return;
|
||||
}
|
||||
const res = await api.getCommunicationMode({ id: deviceTypeId });
|
||||
if (res.code === 0 && res.data) {
|
||||
communicationModeInfo.value = res.data;
|
||||
// 根据通讯方式确定显示哪个字段
|
||||
if (res.data.communicationMode === '1') { // 蓝牙设备 - 显示MAC
|
||||
showMacField.value = true;
|
||||
showImeiField.value = false;
|
||||
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
|
||||
form.value.deviceImei = ''; // 清空IMEI
|
||||
} else if (res.data.communicationMode === '0') { // 4G设备 - 显示IMEI
|
||||
showMacField.value = false;
|
||||
showImeiField.value = true;
|
||||
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
|
||||
form.value.deviceMac = ''; // 清空MAC
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.warning("大小不超过2M的照片片");
|
||||
return false;
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
};
|
||||
// 文件上传状态改变时触发
|
||||
const fileUploadChange=(files, fileList)=> {
|
||||
console.log(fileList, '5555');
|
||||
if (fileList.length > 0) {
|
||||
form.value.image = fileList[0].raw; // 正确获取File对象
|
||||
// 调试：检查是否是真正的 File 对象
|
||||
console.log('File对象验证:', form.value.image);
|
||||
} else {
|
||||
form.value.image = null;
|
||||
}
|
||||
};
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg || '获取通讯方式失败');
|
||||
}
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('获取通讯方式失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 覆盖默认的上传行为，可以自定义上传的实现
|
||||
const httpRequestImg = (parm) => { };
|
||||
const beforeUpload = (file) => {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
|
||||
if (!isJPG) {
|
||||
ElMessage.warning("请上传jpg、png格式，大小不超过2M的照片");
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.warning("大小不超过2M的照片片");
|
||||
return false;
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
};
|
||||
// 文件上传状态改变时触发
|
||||
const fileUploadChange = (files, fileList) => {
|
||||
console.log(fileList, '5555');
|
||||
if (fileList.length > 0) {
|
||||
form.value.image = fileList[0].raw; // 正确获取File对象
|
||||
// 调试：检查是否是真正的 File 对象
|
||||
console.log('File对象验证:', form.value.image);
|
||||
} else {
|
||||
form.value.image = null;
|
||||
}
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
userFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
// try {
|
||||
// const formData = new FormData();
|
||||
// // 处理图片字段
|
||||
// if (this.form.image instanceof File) {
|
||||
// formData.append('file', this.form.image);
|
||||
// } else if (this.form.image && typeof this.form.image === 'string') {
|
||||
// // 编辑时未修改图片，传递原图片URL
|
||||
// formData.append('imageUrl', this.form.image);
|
||||
// }
|
||||
// // 添加其他必要字段
|
||||
// const fields = ['id', 'deviceName', 'deviceType', 'remark'];
|
||||
// fields.forEach(key => {
|
||||
// if (this.form[key] !== undefined && this.form[key] !== null) {
|
||||
// formData.append(key, this.form[key]);
|
||||
// }
|
||||
// });
|
||||
// // 根据通讯方式，有条件地添加deviceMac或deviceImei
|
||||
// if (this.form.deviceMac) {
|
||||
// formData.append('deviceMac', this.form.deviceMac)
|
||||
// }
|
||||
// if (this.form.deviceImei) {
|
||||
// formData.append('deviceImei', this.form.deviceImei)
|
||||
// }
|
||||
// // 根据操作类型设置URL和方法
|
||||
// const isAdd = this.crud.status.add;
|
||||
// const res = await request({ // 使用 await 等待结果
|
||||
// url: isAdd ? '/api/device/add' : '/api/device/update',
|
||||
// method: isAdd ? 'post' : 'put',
|
||||
// data: formData,
|
||||
// headers: {
|
||||
// 'Content-Type': 'multipart/form-data'
|
||||
// }
|
||||
// });
|
||||
// if (res.code == 0) {
|
||||
// this.$message.success(isAdd ? '添加成功' : '编辑成功');
|
||||
// this.crud.cancelCU();
|
||||
// this.crud.toQuery();
|
||||
// } else {
|
||||
// this.$message.warning(res.msg);
|
||||
// }
|
||||
// } catch (err) {
|
||||
// this.$message.warning('操作失败');
|
||||
// console.error(err);
|
||||
// }
|
||||
const submitForm = async () => {
|
||||
try {
|
||||
const valid = await userFormRef.value?.validate();
|
||||
if (!valid) return;
|
||||
loadingIng.value = true;
|
||||
const formData = new FormData();
|
||||
// 处理图片字段
|
||||
if (form.value.image instanceof File) {
|
||||
formData.append('file', form.value.image);
|
||||
} else if (form.value.image && typeof form.value.image === 'string') {
|
||||
// 如果是URL且需要转换为二进制
|
||||
const blob = await urlToBlob(form.value.image);
|
||||
formData.append('file', blob, 'image.jpg'); // 添加文件名
|
||||
}
|
||||
});
|
||||
// 添加其他必要字段
|
||||
const fields = ['id', 'deviceName', 'deviceType', 'remark'];
|
||||
fields.forEach(key => {
|
||||
if (form.value[key] !== undefined && form.value[key] !== null) {
|
||||
formData.append(key, String(form.value[key])); // 确保所有值都转为字符串
|
||||
}
|
||||
});
|
||||
// 根据通讯方式，有条件地添加deviceMac或deviceImei
|
||||
if (form.value.deviceMac) {
|
||||
formData.append('deviceMac', form.value.deviceMac);
|
||||
}
|
||||
if (form.value.deviceImei) {
|
||||
formData.append('deviceImei', form.value.deviceImei);
|
||||
}
|
||||
// 根据操作类型设置URL和方法
|
||||
const isAdd = !form.value.id; // 注意这里逻辑反了，应该是没有id时是新增
|
||||
const res = await request({
|
||||
url: isAdd ? '/api/device/add' : '/api/device/update',
|
||||
method: isAdd ? 'post' : 'put',
|
||||
data: formData,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
if (res.code == 0) {
|
||||
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
loadingIng.value = false;
|
||||
await getList();
|
||||
} else {
|
||||
proxy?.$modal.msgWarning(res.msg)
|
||||
loadingIng.value = false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
loadingIng.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// URL转Blob的方法函数
|
||||
const urlToBlob = async (url: string): Promise<Blob> => {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error('图片加载失败');
|
||||
return await response.blob();
|
||||
};
|
||||
|
||||
/**
|
||||
@ -432,9 +653,161 @@ const getDeviceType = () => {
|
||||
|
||||
})
|
||||
};
|
||||
// 客户下拉框
|
||||
const getAllCustomerAll = () => {
|
||||
api.userAllCustomerAll().then(res => {
|
||||
if (res.code == 0) {
|
||||
customerList.value = res.data
|
||||
}
|
||||
})
|
||||
};
|
||||
// 分配客户
|
||||
const assignRow = ref()
|
||||
const handleAssign = (row: any) => {
|
||||
getAllCustomerAll()
|
||||
assignDialogVisible.value = true
|
||||
assignRow.value = row
|
||||
assignCustomerId.value = row.customerId
|
||||
}
|
||||
const handleAssignConfirm = () => {
|
||||
if (!assignCustomerId.value) {
|
||||
return proxy?.$modal.msgError('请选择客户')
|
||||
}
|
||||
loadingIng.value = true;
|
||||
// 这里调用分配API
|
||||
let data = {
|
||||
customerId: assignCustomerId.value,
|
||||
deviceIds: [assignRow.value.id]
|
||||
}
|
||||
api.deviceAssignCustomer(data).then((res) => {
|
||||
if (res.code == 0) {
|
||||
loadingIng.value = false;
|
||||
const customer = customerList.value.find(c => c.id === assignCustomerId.value)
|
||||
const customerName = customer ? customer.nickName : `ID: ${assignCustomerId.value}`
|
||||
getList();
|
||||
assignDialogVisible.value = false
|
||||
return proxy?.$modal.msgSuccess(`设备已分配给客户: ${customerName}`)
|
||||
|
||||
} else {
|
||||
loadingIng.value = false;
|
||||
}
|
||||
})
|
||||
};
|
||||
const importUpload = ref()
|
||||
const importResult = ref()
|
||||
const handleBatchImport = () => {
|
||||
importDialogVisible.value = true
|
||||
importResult.value = {
|
||||
isShow: false,
|
||||
total: 0,
|
||||
succeed: 0,
|
||||
errorSun: 0,
|
||||
link: ''
|
||||
}
|
||||
nextTick(() => {
|
||||
if (importUpload.value) {
|
||||
importUpload.value.clearFiles()
|
||||
}
|
||||
})
|
||||
};
|
||||
const downloadTemplate = () => {
|
||||
// 这里可用 window.open 或 a 标签下载模板
|
||||
const link = document.createElement('a');
|
||||
link.href = 'http://fuyuanshen.com:81/images/excel/equipmenttemplate.xlsx';
|
||||
link.download = '设备数据导入模板.xlsx'; // 可选：指定下载文件名
|
||||
link.style.display = 'none'; // 隐藏标签
|
||||
document.body.appendChild(link);
|
||||
link.click(); // 触发下载
|
||||
document.body.removeChild(link); // 移除标签
|
||||
};
|
||||
const beforeImportUpload = (file: any) => {
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isLt5M) {
|
||||
proxy?.$modal.msgError('上传文件大小不能超过 5MB!')
|
||||
}
|
||||
return isLt5M
|
||||
};
|
||||
|
||||
//添加tokenf方法head_upload 直接返回 getBearerToken()
|
||||
const head_upload = () => getBearerToken();
|
||||
const handleImportSuccess = (response: any) => {
|
||||
if (response.code === 0) {
|
||||
importResult.value.isShow = true
|
||||
if (response.data) {
|
||||
importResult.value.succeed = response.data.successCount || 0
|
||||
importResult.value.errorSun = response.data.failureCount || 0
|
||||
importResult.value.total = importResult.value.succeed + importResult.value.errorSun
|
||||
importResult.value.link = response.data.errorExcelUrl || ''
|
||||
}
|
||||
getList(); // 初始化列表数据
|
||||
} else {
|
||||
proxy?.$modal.msgError(response.msg || '导入失败')
|
||||
}
|
||||
};
|
||||
const handleImportError = () => {
|
||||
proxy?.$modal.msgError('导入失败')
|
||||
};
|
||||
// 批量分配客户
|
||||
const handleBatchAssign = () => {
|
||||
batchAssignDialogVisible.value = true
|
||||
getAllCustomerAll()
|
||||
};
|
||||
// 批量分配客户确定
|
||||
const handleBatchAssignConfirm = () => {
|
||||
if (!batchAssignCustomerId.value) {
|
||||
return proxy?.$modal.msgError('请选择客户')
|
||||
}
|
||||
// 这里可以调用批量分配API，传递 crud.selections 和 batchAssignCustomerId
|
||||
// 提取选中设备的 ID 数组
|
||||
const selectedIds = ids.value.map((item) => item.id)
|
||||
// 构造请求数据
|
||||
const data = {
|
||||
customerId: batchAssignCustomerId.value, // 目标客户ID
|
||||
deviceIds: selectedIds // 选中的设备ID数组
|
||||
}
|
||||
api.deviceAssignCustomer(data).then((res) => {
|
||||
if (res.code == 0) {
|
||||
batchAssignDialogVisible.value = false
|
||||
getList();
|
||||
return proxy?.$modal.msgSuccess(`分配成功`)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
|
||||
watch(() => form.value.deviceType, (newVal) => {
|
||||
if (dialog.title === '新增设备') { // Only for add form
|
||||
handleDeviceTypeChange(newVal);
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
getList(); // 初始化列表数据
|
||||
getDeviceType()
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep .el-upload--picture-card {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
border: 1px solid #cccc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep .el-upload.el-upload--text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep .el-upload-list--picture-card .el-upload-list__item {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
:deep .el-upload-list__item-thumbnail {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user