|
|
@@ -0,0 +1,885 @@
|
|
|
+<template>
|
|
|
+ <ContentWrap v-loading="formLoading">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ style="margin-right: 4em; margin-left: 0.5em"
|
|
|
+ label-width="130px">
|
|
|
+ <div class="title-div">
|
|
|
+ <el-button @click="baseInfoClick" class="title-button">
|
|
|
+ <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
|
|
|
+ <span class="cursor-pointer">{{ t('deviceForm.basic') }}</span>
|
|
|
+ <Icon
|
|
|
+ color="black"
|
|
|
+ :icon="baseIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
|
|
|
+ :size="18"
|
|
|
+ class="cursor-pointer" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="base-expandable-content" :class="{ 'is-expanded': baseIsExpanded }">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.yfClass')" prop="yfClass">
|
|
|
+ <el-cascader
|
|
|
+ :disabled="formType === 'update' && formData.yfDeviceCode"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="formData.yfClass"
|
|
|
+ :options="yfclasses"
|
|
|
+ :props="{ expandTrigger: 'hover' }"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ @change="handleYfClassChange" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.yfCode')" prop="yfDeviceCode">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.yfDeviceCode"
|
|
|
+ :disabled="formData.yfDeviceCode"
|
|
|
+ placeholder="请输入油服设备编码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.code')" prop="deviceCode">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.deviceCode"
|
|
|
+ :disabled="formType === 'update'"
|
|
|
+ placeholder="请输入设备编码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.name')" prop="deviceName">
|
|
|
+ <lang-input v-model="formData.deviceName" placeholder="请输入设备名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.dept')" prop="deptId">
|
|
|
+ <el-tree-select
|
|
|
+ :disabled="formType === 'update'"
|
|
|
+ v-model="formData.deptId"
|
|
|
+ :data="deptList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ node-key="id"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择所在部门" />
|
|
|
+ <!-- <el-tree-select-->
|
|
|
+ <!-- v-model="formData.deptId"-->
|
|
|
+ <!-- :data="deptList"-->
|
|
|
+ <!-- :props="defaultProps"-->
|
|
|
+ <!-- check-strictly-->
|
|
|
+ <!-- node-key="id"-->
|
|
|
+ <!-- placeholder="请选择归属部门"-->
|
|
|
+ <!-- />-->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.category')" prop="assetClass">
|
|
|
+ <el-tree-select
|
|
|
+ :disabled="formType === 'update' && username !== '超级管理员'"
|
|
|
+ v-model="formData.assetClass"
|
|
|
+ :data="productClassifyList"
|
|
|
+ :props="defaultProps"
|
|
|
+ check-strictly
|
|
|
+ node-key="id"
|
|
|
+ :placeholder="t('deviceForm.categoryHolder')"
|
|
|
+ @change="assetclasschange"
|
|
|
+ filterable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.status')" prop="deviceStatus">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.deviceStatus"
|
|
|
+ :placeholder="t('deviceForm.choose')"
|
|
|
+ :disabled="formType === 'update'"
|
|
|
+ clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)"
|
|
|
+ :key="dict.label"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.assets')" prop="assetProperty">
|
|
|
+ <el-select v-model="formData.assetProperty" placeholder="请选择" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.PMS_ASSET_PROPERTY)"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('iotDevice.brand')" prop="brandName">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ v-model="formData.brandName"
|
|
|
+ @clear="brandClear"
|
|
|
+ :placeholder="t('iotDevice.brandHolder')"
|
|
|
+ @click="openForm" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="车牌号" prop="carNo">
|
|
|
+ <el-input clearable v-model="formData.carNo" placeholder="请输入车牌号" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="设备号" prop="deviceNo">
|
|
|
+ <el-input clearable v-model="formData.deviceNo" placeholder="请输入设备号" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div style="display: flex; flex-direction: row">
|
|
|
+ <el-form-item :label="t('deviceForm.model')" prop="model" style="width: 86%">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ v-model="formData.model"
|
|
|
+ :placeholder="t('deviceForm.modelHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="info" @click="openModelForm">请选择</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.useProject')" prop="useProject">
|
|
|
+ <el-input v-model="formData.useProject" :disabled="isDetail" height="60px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.assetOwner')" prop="assetOwnership">
|
|
|
+ <el-input v-model="formData.assetOwnership" :disabled="isDetail" height="60px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所在地点" prop="address">
|
|
|
+ <el-input v-model="formData.address" height="60px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.picture')" prop="picUrl">
|
|
|
+ <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="60px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.remark')" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.remark"
|
|
|
+ type="textarea"
|
|
|
+ :placeholder="t('deviceForm.remarkHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="title-div">
|
|
|
+ <el-button @click="zzInfoClick" class="title-button">
|
|
|
+ <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
|
|
|
+ <span class="cursor-pointer">{{ t('deviceForm.make') }}</span>
|
|
|
+ <Icon
|
|
|
+ color="black"
|
|
|
+ :icon="zzIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
|
|
|
+ :size="18"
|
|
|
+ class="cursor-pointer" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="zz-expandable-content" :class="{ 'is-expanded': zzIsExpanded }">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.mfg')" prop="manufacturerId">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ @clear="zzClear"
|
|
|
+ v-model="formData.manufacturerName"
|
|
|
+ :placeholder="t('deviceForm.mfgHolder')"
|
|
|
+ @click="openCustomerZz" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.pd')" prop="manDate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 150%"
|
|
|
+ v-model="formData.manDate"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ :placeholder="t('deviceForm.pdHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.supplier')" prop="supplierId">
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ @clear="supplierClear"
|
|
|
+ v-model="formData.supplierName"
|
|
|
+ :placeholder="t('deviceForm.suppHolder')"
|
|
|
+ @click="openCustomerSupplier" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.warranty')" prop="expires">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 150%"
|
|
|
+ v-model="formData.expires"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ :placeholder="t('deviceForm.warrHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.enable')" prop="enableDate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 150%"
|
|
|
+ v-model="formData.enableDate"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ :placeholder="t('deviceForm.enableHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="t('deviceForm.ni')" prop="nameplate">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.nameplate"
|
|
|
+ type="textarea"
|
|
|
+ :placeholder="t('deviceForm.niHolder')" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="title-div">
|
|
|
+ <el-button @click="cwInfoClick" class="title-button">
|
|
|
+ <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
|
|
|
+ <span class="cursor-pointer">{{ t('deviceForm.finance') }}</span>
|
|
|
+ <Icon
|
|
|
+ color="black"
|
|
|
+ :icon="cwIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
|
|
|
+ :size="18"
|
|
|
+ class="cursor-pointer" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="cw-expandable-content" :class="{ 'is-expanded': cwIsExpanded }">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '采购价格' : '租赁价格'"
|
|
|
+ prop="plPrice">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.plPrice"
|
|
|
+ @input="handleInput(formData.plPrice, 'plPrice')"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请输入采购价格' : '请输入租赁价格'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '采购日期' : '租赁日期'"
|
|
|
+ prop="plDate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 150%"
|
|
|
+ v-model="formData.plDate"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请输入采购日期' : '请输入租赁日期'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '折旧年限' : '租赁年限'"
|
|
|
+ prop="plYear">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.plYear"
|
|
|
+ type="number"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请输入折旧年限' : '请输入租赁年限'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '折旧开始日期' : '租赁开始日期'"
|
|
|
+ prop="plStartDate">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 150%"
|
|
|
+ v-model="formData.plStartDate"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请选择折旧开始日期' : '请选择租赁开始日期'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '已提折旧月数' : '已租赁月数'"
|
|
|
+ prop="plMonthed">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.plMonthed"
|
|
|
+ type="number"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请输入已提折旧月数' : '请输入已租赁月数'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item
|
|
|
+ :label="formData.assetProperty === 'zy' ? '已提折旧金额' : '已租赁金额'"
|
|
|
+ prop="plAmounted">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.plAmounted"
|
|
|
+ @input="handleInput(formData.plAmounted, 'plAmounted')"
|
|
|
+ :placeholder="
|
|
|
+ formData.assetProperty === 'zy' ? '请输入已提折旧金额' : '已租赁金额'
|
|
|
+ " />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="剩余金额" prop="remainAmount">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.remainAmount"
|
|
|
+ @input="handleInput(formData.remainAmount, 'remainAmount')"
|
|
|
+ placeholder="请输入剩余金额" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="每月折旧金额" prop="monthAmount">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.monthAmount"
|
|
|
+ @input="handleInput(formData.monthAmount, 'monthAmount')"
|
|
|
+ placeholder="请输入每月折旧金额" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="总折旧月份" prop="totalMonth">
|
|
|
+ <el-input
|
|
|
+ v-model="formData.totalMonth"
|
|
|
+ @input="handleInput(formData.totalMonth, 'totalMonth')"
|
|
|
+ placeholder="请输入总折旧月份" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="币种" prop="currency">
|
|
|
+ <el-input v-model="formData.currency" placeholder="请输入币种" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="title-div">
|
|
|
+ <el-button @click="qtInfoClick" class="title-button">
|
|
|
+ <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
|
|
|
+ <span class="cursor-pointer">{{ t('deviceForm.other') }}</span>
|
|
|
+ <Icon
|
|
|
+ color="black"
|
|
|
+ :icon="qtIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
|
|
|
+ :size="18"
|
|
|
+ class="cursor-pointer" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="qt-expandable-content" :class="{ 'is-expanded': qtIsExpanded }">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="field in list" :key="field.sort" :span="8">
|
|
|
+ <el-form-item
|
|
|
+ label-width="180px"
|
|
|
+ :label="field.name"
|
|
|
+ :prop="field.code"
|
|
|
+ :rules="field.rules">
|
|
|
+ <!-- 文本输入 -->
|
|
|
+ <el-input
|
|
|
+ v-if="field.type === 'text'"
|
|
|
+ v-model="formData[field.code]"
|
|
|
+ :placeholder="'请输入' + field.name"
|
|
|
+ :type="field.type || 'text'" />
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-else-if="field.type === 'enum'"
|
|
|
+ v-model="formData[field.code]"
|
|
|
+ :placeholder="'请输入' + field.name"
|
|
|
+ clearable
|
|
|
+ filterable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in field.selectOptions.dataSpecsList"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <!-- 数字输入 -->
|
|
|
+ <el-input
|
|
|
+ v-else-if="field.type === 'int'"
|
|
|
+ type="number"
|
|
|
+ v-model="formData[field.code]"
|
|
|
+ style="width: 150%" />
|
|
|
+ <el-input
|
|
|
+ v-else-if="field.type === 'double'"
|
|
|
+ v-model="formData[field.code]"
|
|
|
+ @input="handleInput(formData[field.code], field.code)"
|
|
|
+ style="width: 150%" />
|
|
|
+ <!-- 日期选择 -->
|
|
|
+ <el-date-picker
|
|
|
+ v-else-if="field.type === 'date'"
|
|
|
+ v-model="formData[field.code]"
|
|
|
+ :type="field.type || 'date'"
|
|
|
+ :placeholder="'请输入' + field.name"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ style="width: 150%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item style="float: right">
|
|
|
+ <el-button type="success" @click="allzhankai">{{ t('deviceForm.expand') }}</el-button>
|
|
|
+ <el-button type="info" @click="allshouqi">{{ t('deviceForm.close') }}</el-button>
|
|
|
+ <el-button v-if="!isDetail" :loading="formLoading" type="warning" @click="submitForm">
|
|
|
+ {{ t('deviceForm.save') }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="close" type="primary">{{ t('deviceForm.return') }}</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </ContentWrap>
|
|
|
+ <BrandList ref="brandFormRef" @choose="brandChoose" />
|
|
|
+ <ModelList ref="modelFormRef" @choose="modelChoose" :brand="formData.brand" />
|
|
|
+ <CustomerList ref="customerZzFormRef" @choose="customerZzChoose" />
|
|
|
+ <CustomerList ref="customerSupplierFormRef" @choose="customerSupplierChoose" />
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
|
|
|
+import BrandList from '@/views/pms/device/BrandList.vue'
|
|
|
+import ModelList from '@/views/pms/device/ModelList.vue'
|
|
|
+import CustomerList from '@/views/pms/device/CustomerList.vue'
|
|
|
+import { defaultProps, handleTree } from '@/utils/tree'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
+import * as ProductClassifyApi from '@/api/pms/productclassify'
|
|
|
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
|
|
+import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
+import { DeviceAttrModelApi } from '@/api/pms/deviceattrmodel'
|
|
|
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
+import { IotYfClassifyApi } from '@/api/pms/yfclass'
|
|
|
+import { useRefreshStore } from '@/store/modules/pms/refreshStore'
|
|
|
+import { watch } from 'vue'
|
|
|
+
|
|
|
+/** 设备台账 表单 */
|
|
|
+defineOptions({ name: 'DeviceDetailAdd' })
|
|
|
+const baseIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const zzIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const cwIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const qtIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+
|
|
|
+const username = ref('')
|
|
|
+const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
+const productClassifyList = ref<Tree[]>([]) // 树形结构
|
|
|
+const { delView } = useTagsViewStore() // 视图操作
|
|
|
+const { params, name, query } = useRoute() // 查询参数
|
|
|
+const { currentRoute, push } = useRouter()
|
|
|
+const { wsCache } = useCache()
|
|
|
+const id = params.id
|
|
|
+const type = params.type
|
|
|
+const deptId = params.deptId
|
|
|
+const isDetail = params.isDetail
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
+const dialogTitle = ref('') // 弹窗的标题
|
|
|
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
+const brandLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
+const zzLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
+const supplierLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
+const yfclasses = ref([])
|
|
|
+const refreshStore = useRefreshStore()
|
|
|
+
|
|
|
+const formData = ref({
|
|
|
+ id: undefined,
|
|
|
+ yfClass: undefined,
|
|
|
+ yfDeviceCode: undefined,
|
|
|
+ enableDate: undefined,
|
|
|
+ deviceCode: undefined,
|
|
|
+ deviceName: undefined,
|
|
|
+ brand: undefined,
|
|
|
+ brandName: undefined,
|
|
|
+ model: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ deviceStatus: undefined,
|
|
|
+ assetProperty: undefined,
|
|
|
+ picUrl: undefined,
|
|
|
+ assetOwnership: undefined,
|
|
|
+ remark: undefined,
|
|
|
+ useProject: undefined,
|
|
|
+ manufacturerId: undefined,
|
|
|
+ manufacturerName: undefined,
|
|
|
+ supplierId: undefined,
|
|
|
+ supplierName: undefined,
|
|
|
+ manDate: undefined,
|
|
|
+ nameplate: undefined,
|
|
|
+ expires: undefined,
|
|
|
+ plPrice: undefined,
|
|
|
+ plDate: undefined,
|
|
|
+ plYear: undefined,
|
|
|
+ plStartDate: undefined,
|
|
|
+ plMonthed: undefined,
|
|
|
+ plAmounted: undefined,
|
|
|
+ remainAmount: undefined,
|
|
|
+ infoId: undefined,
|
|
|
+ infoType: undefined,
|
|
|
+ infoName: undefined,
|
|
|
+ infoRemark: undefined,
|
|
|
+ infoUrl: undefined,
|
|
|
+ templateJson: undefined,
|
|
|
+ assetClass: undefined,
|
|
|
+ carNo: undefined,
|
|
|
+ deviceNo: undefined,
|
|
|
+ address: undefined,
|
|
|
+ monthAmount: undefined,
|
|
|
+ totalMonth: undefined,
|
|
|
+ currency: undefined
|
|
|
+})
|
|
|
+const formRules = reactive({
|
|
|
+ yfClass: [
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 当资产性质为租赁('zl')时，yfClass非必填；否则必填
|
|
|
+ if (formData.value.assetProperty === 'zl' || value) {
|
|
|
+ callback() // 租赁资产或有值时通过验证
|
|
|
+ } else {
|
|
|
+ callback(new Error('编码类别不能为空')) // 非租赁资产且无值时失败
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yfDeviceCode: [{ required: true, message: '油服编码不能为空', trigger: 'blur' }],
|
|
|
+ assetClass: [{ required: true, message: '资产类别不能为空', trigger: 'blur' }],
|
|
|
+ deviceCode: [{ required: true, message: '设备编码不能为空', trigger: 'blur' }],
|
|
|
+ deviceName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
|
|
|
+ brandName: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
|
|
|
+ deptId: [{ required: true, message: '所在部门不能为空', trigger: 'blur' }],
|
|
|
+ deviceStatus: [{ required: true, message: '设备状态不能为空', trigger: 'blur' }],
|
|
|
+ assetProperty: [{ required: true, message: '资产性质不能为空', trigger: 'blur' }],
|
|
|
+ manufacturerId: [{ required: true, message: '制造商id不能为空', trigger: 'blur' }],
|
|
|
+ manDate: [{ required: true, message: '生产日期不能为空', trigger: 'blur' }]
|
|
|
+})
|
|
|
+
|
|
|
+const list = ref([])
|
|
|
+const handleYfClassChange = async (value) => {
|
|
|
+ console.log(value)
|
|
|
+ const prefix = value.join('')
|
|
|
+ const last = await IotDeviceApi.getMaxCode(prefix)
|
|
|
+ formData.value.yfDeviceCode = prefix + last
|
|
|
+}
|
|
|
+const assetclasschange = () => {
|
|
|
+ const assetClass = formData.value.assetClass
|
|
|
+ DeviceAttrModelApi.getDeviceAttrModelListByDeviceCategoryId(assetClass).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ res.forEach((item) => {
|
|
|
+ if (item.requiredFlag) {
|
|
|
+ const rule = { required: true, message: item.name + '不能为空', trigger: 'blur' }
|
|
|
+ item.rules = []
|
|
|
+ item.rules.push(rule)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ list.value = res
|
|
|
+ } else {
|
|
|
+ list.value = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => formData.value.assetProperty,
|
|
|
+ (newVal) => {
|
|
|
+ nextTick(() => {
|
|
|
+ if (formRef.value) {
|
|
|
+ // 重新验证 yfClass 和 yfCode 字段
|
|
|
+ formRef.value.validateField('yfClass')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+)
|
|
|
+
|
|
|
+const brandChoose = (row) => {
|
|
|
+ formData.value.brand = row.id
|
|
|
+ // brandLabel.value = row.value
|
|
|
+ formData.value.brandName = row.label
|
|
|
+}
|
|
|
+const brandClear = () => {
|
|
|
+ formData.value.brand = undefined
|
|
|
+ formData.value.brandName = undefined
|
|
|
+}
|
|
|
+const modelChoose = (row) => {
|
|
|
+ formData.value.model = row.name
|
|
|
+}
|
|
|
+const customerSupplierChoose = (row) => {
|
|
|
+ formData.value.supplierId = row.id
|
|
|
+ formData.value.supplierName = row.name
|
|
|
+ // supplierLabel.value = row.name
|
|
|
+}
|
|
|
+const supplierClear = (row) => {
|
|
|
+ formData.value.supplierId = undefined
|
|
|
+ formData.value.supplierName = undefined
|
|
|
+}
|
|
|
+const customerZzChoose = (row) => {
|
|
|
+ formData.value.manufacturerId = row.id
|
|
|
+ // zzLabel.value = row.name
|
|
|
+ formData.value.manufacturerName = row.name
|
|
|
+}
|
|
|
+const zzClear = () => {
|
|
|
+ formData.value.manufacturerId = undefined
|
|
|
+ formData.value.manufacturerName = undefined
|
|
|
+}
|
|
|
+/** 添加/修改操作 */
|
|
|
+const brandFormRef = ref()
|
|
|
+const openForm = () => {
|
|
|
+ brandFormRef.value.open()
|
|
|
+}
|
|
|
+const modelFormRef = ref()
|
|
|
+const openModelForm = () => {
|
|
|
+ modelFormRef.value.open()
|
|
|
+}
|
|
|
+const customerSupplierFormRef = ref()
|
|
|
+const openCustomerSupplier = () => {
|
|
|
+ customerSupplierFormRef.value.open()
|
|
|
+}
|
|
|
+const customerZzFormRef = ref()
|
|
|
+const openCustomerZz = () => {
|
|
|
+ customerZzFormRef.value.open()
|
|
|
+}
|
|
|
+const allshouqi = () => {
|
|
|
+ baseIsExpanded.value = false
|
|
|
+ zzIsExpanded.value = false
|
|
|
+ cwIsExpanded.value = false
|
|
|
+ qtIsExpanded.value = false
|
|
|
+}
|
|
|
+const allzhankai = () => {
|
|
|
+ baseIsExpanded.value = true
|
|
|
+ zzIsExpanded.value = true
|
|
|
+ cwIsExpanded.value = true
|
|
|
+ qtIsExpanded.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const handleInput = (value, obj) => {
|
|
|
+ // 1. 过滤非法字符（只允许数字和小数点）
|
|
|
+ let filtered = value.replace(/[^\d.]/g, '')
|
|
|
+
|
|
|
+ // 2. 处理多个小数点的情况
|
|
|
+ filtered = filtered.replace(/\.{2,}/g, '.')
|
|
|
+
|
|
|
+ // 3. 限制小数点后最多两位
|
|
|
+ let decimalParts = filtered.split('.')
|
|
|
+ if (decimalParts.length > 1) {
|
|
|
+ decimalParts = decimalParts.slice(0, 2)
|
|
|
+ filtered = decimalParts.join('.')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 处理以小数点开头的情况（自动补0）
|
|
|
+ if (filtered.startsWith('.')) {
|
|
|
+ filtered = '0' + filtered
|
|
|
+ }
|
|
|
+
|
|
|
+ // 5. 更新绑定值（同时处理连续输入多个0的情况）
|
|
|
+ formData.value[obj] = filtered.replace(/^0+(?=\d)/, '')
|
|
|
+}
|
|
|
+
|
|
|
+const close = () => {
|
|
|
+ delView(unref(currentRoute))
|
|
|
+ push({ name: 'IotDevicePms', params: {} })
|
|
|
+ // delView(unref(currentRoute))
|
|
|
+ // push({
|
|
|
+ // name: 'IotDevicePms',
|
|
|
+ // query: {
|
|
|
+ // date: new Date().getTime()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+}
|
|
|
+const baseInfoClick = () => {
|
|
|
+ baseIsExpanded.value = !baseIsExpanded.value // 切换展开状态
|
|
|
+}
|
|
|
+const zzInfoClick = () => {
|
|
|
+ zzIsExpanded.value = !zzIsExpanded.value // 切换展开状态
|
|
|
+}
|
|
|
+const cwInfoClick = () => {
|
|
|
+ cwIsExpanded.value = !cwIsExpanded.value // 切换展开状态
|
|
|
+}
|
|
|
+const qtInfoClick = () => {
|
|
|
+ qtIsExpanded.value = !qtIsExpanded.value // 切换展开状态
|
|
|
+}
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
+const formRef = ref()
|
|
|
+const submitForm = async () => {
|
|
|
+ // 校验表单
|
|
|
+ await formRef.value.validate()
|
|
|
+ // 提交请求
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ if (list.value) {
|
|
|
+ list.value = list.value.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ value: formData.value[item.code] // 自定义属性生成逻辑
|
|
|
+ }))
|
|
|
+ formData.value.templateJson = JSON.stringify(list.value)
|
|
|
+ }
|
|
|
+ formData.value.yfClass = formData.value.yfClass.join(',')
|
|
|
+ const data = formData.value as unknown as IotDeviceVO
|
|
|
+ if (formType.value === 'create') {
|
|
|
+ await IotDeviceApi.createIotDevice(data)
|
|
|
+ message.success(t('common.createSuccess'))
|
|
|
+ } else {
|
|
|
+ await IotDeviceApi.updateIotDevice(data)
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ }
|
|
|
+ dialogVisible.value = false
|
|
|
+ // 发送操作成功的事件
|
|
|
+ //emit('success')
|
|
|
+ const sourcePage = query.source as string
|
|
|
+
|
|
|
+ // 如果有来源页面标识，触发原页面的刷新
|
|
|
+ if (sourcePage) {
|
|
|
+ refreshStore.triggerRefresh(sourcePage)
|
|
|
+ }
|
|
|
+ close()
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ const userInfo = wsCache.get(CACHE_KEY.USER)
|
|
|
+ // NOTE: 是否需要像`setUserInfoAction`一样判断`userInfo != null`
|
|
|
+ username.value = userInfo.user.nickname
|
|
|
+ deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
|
+ productClassifyList.value = handleTree(
|
|
|
+ await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList()
|
|
|
+ )
|
|
|
+ formData.value.assetProperty = 'zy'
|
|
|
+ // 修改时，设置数据
|
|
|
+ if (id) {
|
|
|
+ formType.value = 'update'
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ const iotDevice = await IotDeviceApi.getIotDevice(id)
|
|
|
+ formData.value = iotDevice
|
|
|
+ formData.value.brandName = iotDevice.brandName
|
|
|
+ formData.value.manufacturerName = iotDevice.zzName
|
|
|
+ formData.value.supplierName = iotDevice.supplierName
|
|
|
+ formData.value.carNo = iotDevice.carNo
|
|
|
+ formData.value.deviceNo = iotDevice.deviceNo
|
|
|
+ formData.value.address = iotDevice.address
|
|
|
+ if (iotDevice.yfClass) {
|
|
|
+ formData.value.yfClass = iotDevice.yfClass.split(',')
|
|
|
+ }
|
|
|
+ list.value = JSON.parse(iotDevice.templateJson)
|
|
|
+ list.value.forEach((item) => {
|
|
|
+ formData.value[item.code] = item.value
|
|
|
+ })
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (deptId) {
|
|
|
+ formData.value.deptId = Number(deptId)
|
|
|
+ }
|
|
|
+ formType.value = 'create'
|
|
|
+ }
|
|
|
+ await IotYfClassifyApi.getChildrenList().then((res) => {
|
|
|
+ yfclasses.value = res
|
|
|
+ })
|
|
|
+})
|
|
|
+/** 重置表单 */
|
|
|
+const resetForm = () => {
|
|
|
+ formData.value = {
|
|
|
+ id: undefined,
|
|
|
+ deviceCode: undefined,
|
|
|
+ deviceName: undefined,
|
|
|
+ brand: undefined,
|
|
|
+ model: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ deviceStatus: undefined,
|
|
|
+ assetProperty: undefined,
|
|
|
+ picUrl: undefined,
|
|
|
+ remark: undefined,
|
|
|
+ manufacturerId: undefined,
|
|
|
+ supplierId: undefined,
|
|
|
+ manDate: undefined,
|
|
|
+ nameplate: undefined,
|
|
|
+ expires: undefined,
|
|
|
+ plPrice: undefined,
|
|
|
+ plDate: undefined,
|
|
|
+ plYear: undefined,
|
|
|
+ plStartDate: undefined,
|
|
|
+ plMonthed: undefined,
|
|
|
+ plAmounted: undefined,
|
|
|
+ remainAmount: undefined,
|
|
|
+ infoId: undefined,
|
|
|
+ infoType: undefined,
|
|
|
+ infoName: undefined,
|
|
|
+ infoRemark: undefined,
|
|
|
+ infoUrl: undefined,
|
|
|
+ templateJson: undefined,
|
|
|
+ assetClass: undefined
|
|
|
+ }
|
|
|
+ formRef.value?.resetFields()
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.base-expandable-content {
|
|
|
+ max-height: 0; /* 初始高度为0 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
+ transition: max-height 0.3s ease; /* 平滑过渡效果 */
|
|
|
+}
|
|
|
+
|
|
|
+.base-expandable-content.is-expanded {
|
|
|
+ min-height: 350px; /* 或者根据内容设定一个合适的最大高度 */
|
|
|
+}
|
|
|
+.zz-expandable-content {
|
|
|
+ max-height: 0; /* 初始高度为0 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
+ transition: max-height 0.3s ease; /* 平滑过渡效果 */
|
|
|
+}
|
|
|
+
|
|
|
+.zz-expandable-content.is-expanded {
|
|
|
+ min-height: 130px; /* 或者根据内容设定一个合适的最大高度 */
|
|
|
+}
|
|
|
+.cw-expandable-content {
|
|
|
+ max-height: 0; /* 初始高度为0 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
+ transition: max-height 0.3s ease; /* 平滑过渡效果 */
|
|
|
+}
|
|
|
+
|
|
|
+.cw-expandable-content.is-expanded {
|
|
|
+ max-height: 200px; /* 或者根据内容设定一个合适的最大高度 */
|
|
|
+}
|
|
|
+.qt-expandable-content {
|
|
|
+ max-height: 0; /* 初始高度为0 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
+ transition: max-height 0.3s ease; /* 平滑过渡效果 */
|
|
|
+}
|
|
|
+
|
|
|
+.qt-expandable-content.is-expanded {
|
|
|
+ max-height: 1200px; /* 或者根据内容设定一个合适的最大高度 */
|
|
|
+}
|
|
|
+.title-button {
|
|
|
+ font-size: 18px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.title-div {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.cursor-pointer {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.first-icon {
|
|
|
+ margin-bottom: 2px;
|
|
|
+}
|
|
|
+</style>
|
Zimo