|
|
@@ -0,0 +1,713 @@
|
|
|
+<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.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">
|
|
|
+ <el-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'"
|
|
|
+ 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="deviceStatus">
|
|
|
+ <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" >
|
|
|
+ <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.picture')" prop="picUrl">
|
|
|
+ <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="60px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <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="16">
|
|
|
+ <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-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.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </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";
|
|
|
+
|
|
|
+
|
|
|
+/** 设备台账 表单 */
|
|
|
+defineOptions({ name: 'DeviceDetailAddd' })
|
|
|
+const baseIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const zzIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const cwIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+const qtIsExpanded = ref(true) // 控制表单是否展开的变量
|
|
|
+
|
|
|
+const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
+const productClassifyList = ref<Tree[]>([]) // 树形结构
|
|
|
+const { delView } = useTagsViewStore() // 视图操作
|
|
|
+const { params, name } = useRoute() // 查询参数
|
|
|
+const { currentRoute, push } = useRouter()
|
|
|
+
|
|
|
+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 formData = ref({
|
|
|
+ id: undefined,
|
|
|
+ deviceCode: undefined,
|
|
|
+ deviceName: undefined,
|
|
|
+ brand: undefined,
|
|
|
+ brandName: undefined,
|
|
|
+ model: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ deviceStatus: undefined,
|
|
|
+ assetProperty: undefined,
|
|
|
+ picUrl: undefined,
|
|
|
+ remark: 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
|
|
|
+})
|
|
|
+const formRules = reactive({
|
|
|
+ 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 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 = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+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)
|
|
|
+ }
|
|
|
+ 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')
|
|
|
+ close()
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ 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;
|
|
|
+ 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';
|
|
|
+ }
|
|
|
+})
|
|
|
+/** 重置表单 */
|
|
|
+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: 260px; /* 或者根据内容设定一个合适的最大高度 */
|
|
|
+}
|
|
|
+.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>
|
yuanchao