IotDeviceFormAdd.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757
  1. <template>
  2. <ContentWrap v-loading="formLoading">
  3. <el-form ref="formRef" :model="formData" :rules="formRules" style="margin-right: 4em;margin-left: 0.5em" label-width="130px">
  4. <div class="title-div">
  5. <el-button @click="baseInfoClick" class="title-button">
  6. <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
  7. <span class="cursor-pointer">{{ t('deviceForm.basic') }}</span>
  8. <Icon
  9. color="black"
  10. :icon="baseIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
  11. :size="18"
  12. class="cursor-pointer"
  13. />
  14. </el-button>
  15. </div>
  16. <div class="base-expandable-content" :class="{ 'is-expanded': baseIsExpanded }">
  17. <el-row>
  18. <el-col :span="8">
  19. <el-form-item :label="t('iotDevice.yfClass')" prop="yfClass">
  20. <el-cascader
  21. style="width: 100%"
  22. v-model="formData.yfClass"
  23. :options="yfclasses"
  24. :props="{ expandTrigger: 'hover' }"
  25. clearable
  26. filterable
  27. @change="handleYfClassChange" />
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="8">
  31. <el-form-item :label="t('iotDevice.yfCode')" prop="yfCode">
  32. <el-input v-model="formData.yfCode" :disabled="formType==='update'" placeholder="请输入油服设备编码" />
  33. </el-form-item>
  34. </el-col>
  35. <el-col :span="8">
  36. <el-form-item :label="t('iotDevice.code')" prop="deviceCode">
  37. <el-input v-model="formData.deviceCode" :disabled="formType==='update'" placeholder="请输入设备编码" />
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="8">
  41. <el-form-item :label="t('iotDevice.name')" prop="deviceName">
  42. <!-- <el-input v-model="formData.deviceName" placeholder="请输入设备名称" />-->
  43. <lang-input v-model="formData.deviceName" placeholder="请输入设备名称" />
  44. </el-form-item>
  45. </el-col>
  46. <el-col :span="8">
  47. <el-form-item :label="t('iotDevice.dept')" prop="deptId">
  48. <el-tree-select
  49. :disabled="formType==='update'"
  50. v-model="formData.deptId"
  51. :data="deptList"
  52. :props="defaultProps"
  53. check-strictly
  54. node-key="id"
  55. filterable
  56. placeholder="请选择所在部门"
  57. />
  58. <!-- <el-tree-select-->
  59. <!-- v-model="formData.deptId"-->
  60. <!-- :data="deptList"-->
  61. <!-- :props="defaultProps"-->
  62. <!-- check-strictly-->
  63. <!-- node-key="id"-->
  64. <!-- placeholder="请选择归属部门"-->
  65. <!-- />-->
  66. </el-form-item>
  67. </el-col>
  68. <el-col :span="8">
  69. <el-form-item :label="t('deviceForm.category')" prop="assetClass">
  70. <el-tree-select
  71. :disabled="formType==='update'"
  72. v-model="formData.assetClass"
  73. :data="productClassifyList"
  74. :props="defaultProps"
  75. check-strictly
  76. node-key="id"
  77. :placeholder="t('deviceForm.categoryHolder')"
  78. @change="assetclasschange"
  79. filterable
  80. />
  81. </el-form-item>
  82. </el-col>
  83. <el-col :span="8">
  84. <el-form-item :label="t('iotDevice.status')" prop="deviceStatus">
  85. <el-select v-model="formData.deviceStatus" :placeholder="t('deviceForm.choose')" :disabled="formType==='update'" clearable>
  86. <el-option
  87. v-for="dict in getStrDictOptions(DICT_TYPE.PMS_DEVICE_STATUS)"
  88. :key="dict.label"
  89. :label="dict.label"
  90. :value="dict.value"
  91. />
  92. </el-select>
  93. </el-form-item>
  94. </el-col>
  95. <el-col :span="8">
  96. <el-form-item :label="t('iotDevice.assets')" prop="deviceStatus">
  97. <el-select v-model="formData.assetProperty" placeholder="请选择" clearable>
  98. <el-option
  99. v-for="dict in getStrDictOptions(DICT_TYPE.PMS_ASSET_PROPERTY)"
  100. :key="dict.id"
  101. :label="dict.label"
  102. :value="dict.value"
  103. />
  104. </el-select>
  105. </el-form-item>
  106. </el-col>
  107. <el-col :span="8">
  108. <el-form-item :label="t('iotDevice.brand')" prop="brandName">
  109. <el-select
  110. clearable
  111. v-model="formData.brandName"
  112. @clear="brandClear"
  113. :placeholder="t('iotDevice.brandHolder')"
  114. @click="openForm"
  115. />
  116. </el-form-item>
  117. </el-col>
  118. <el-col :span="8" >
  119. <div style="display: flex;flex-direction: row">
  120. <el-form-item :label="t('deviceForm.model')" prop="model" style="width: 86%">
  121. <el-input
  122. clearable
  123. v-model="formData.model"
  124. :placeholder="t('deviceForm.modelHolder')"
  125. />
  126. </el-form-item>
  127. <el-button type="info" @click="openModelForm">请选择</el-button>
  128. </div>
  129. </el-col>
  130. <el-col :span="8">
  131. <el-form-item :label="t('deviceForm.picture')" prop="picUrl">
  132. <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="60px" />
  133. </el-form-item>
  134. </el-col>
  135. <el-col :span="24">
  136. <el-form-item :label="t('deviceForm.remark')" prop="remark">
  137. <el-input v-model="formData.remark" type="textarea" :placeholder="t('deviceForm.remarkHolder')" />
  138. </el-form-item>
  139. </el-col>
  140. </el-row>
  141. </div>
  142. <div class="title-div">
  143. <el-button @click="zzInfoClick" class="title-button">
  144. <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
  145. <span class="cursor-pointer">{{ t('deviceForm.make') }}</span>
  146. <Icon
  147. color="black"
  148. :icon="zzIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
  149. :size="18"
  150. class="cursor-pointer"
  151. />
  152. </el-button>
  153. </div>
  154. <div class="zz-expandable-content" :class="{ 'is-expanded': zzIsExpanded }">
  155. <el-row>
  156. <el-col :span="8">
  157. <el-form-item :label="t('deviceForm.mfg')" prop="manufacturerId">
  158. <el-select
  159. clearable
  160. @clear="zzClear"
  161. v-model="formData.manufacturerName"
  162. :placeholder="t('deviceForm.mfgHolder')"
  163. @click="openCustomerZz"
  164. />
  165. </el-form-item>
  166. </el-col>
  167. <el-col :span="8">
  168. <el-form-item :label="t('deviceForm.pd')" prop="manDate">
  169. <el-date-picker
  170. style="width: 150%"
  171. v-model="formData.manDate"
  172. type="date"
  173. value-format="x"
  174. :placeholder="t('deviceForm.pdHolder')"
  175. />
  176. </el-form-item>
  177. </el-col>
  178. <el-col :span="8">
  179. <el-form-item :label="t('deviceForm.supplier')" prop="supplierId">
  180. <el-select
  181. clearable
  182. @clear="supplierClear"
  183. v-model="formData.supplierName"
  184. :placeholder="t('deviceForm.suppHolder')"
  185. @click="openCustomerSupplier"
  186. />
  187. </el-form-item>
  188. </el-col>
  189. <el-col :span="8">
  190. <el-form-item :label="t('deviceForm.warranty')" prop="expires">
  191. <el-date-picker
  192. style="width: 150%"
  193. v-model="formData.expires"
  194. type="date"
  195. value-format="x"
  196. :placeholder="t('deviceForm.warrHolder')"
  197. />
  198. </el-form-item>
  199. </el-col>
  200. <el-col :span="8">
  201. <el-form-item :label="t('deviceForm.enable')" prop="enableDate">
  202. <el-date-picker
  203. style="width: 150%"
  204. v-model="formData.enableDate"
  205. type="date"
  206. value-format="x"
  207. :placeholder="t('deviceForm.enableHolder')"
  208. />
  209. </el-form-item>
  210. </el-col>
  211. <el-col :span="8">
  212. <el-form-item :label="t('deviceForm.ni')" prop="nameplate">
  213. <el-input v-model="formData.nameplate" type="textarea" :placeholder="t('deviceForm.niHolder')"/>
  214. </el-form-item>
  215. </el-col>
  216. </el-row>
  217. </div>
  218. <div class="title-div">
  219. <el-button @click="cwInfoClick" class="title-button">
  220. <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
  221. <span class="cursor-pointer">{{ t('deviceForm.finance') }}</span>
  222. <Icon
  223. color="black"
  224. :icon="cwIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
  225. :size="18"
  226. class="cursor-pointer"
  227. />
  228. </el-button>
  229. </div>
  230. <div class="cw-expandable-content" :class="{ 'is-expanded': cwIsExpanded }">
  231. <el-row>
  232. <el-col :span="8">
  233. <el-form-item :label="formData.assetProperty==='zy'?'采购价格':'租赁价格'" prop="plPrice">
  234. <el-input
  235. v-model="formData.plPrice"
  236. @input="handleInput(formData.plPrice, 'plPrice')"
  237. :placeholder="formData.assetProperty==='zy'?'请输入采购价格':'请输入租赁价格'"
  238. />
  239. </el-form-item>
  240. </el-col>
  241. <el-col :span="8">
  242. <el-form-item :label="formData.assetProperty==='zy'?'采购日期':'租赁日期'" prop="plDate">
  243. <el-date-picker
  244. style="width: 150%"
  245. v-model="formData.plDate"
  246. type="date"
  247. value-format="x"
  248. :placeholder="formData.assetProperty==='zy'?'请输入采购日期':'请输入租赁日期'"
  249. />
  250. </el-form-item>
  251. </el-col>
  252. <el-col :span="8">
  253. <el-form-item :label="formData.assetProperty==='zy'?'折旧年限':'租赁年限'" prop="plYear">
  254. <el-input v-model="formData.plYear" type="number" :placeholder="formData.assetProperty==='zy'?'请输入折旧年限':'请输入租赁年限'" />
  255. </el-form-item>
  256. </el-col>
  257. <el-col :span="8">
  258. <el-form-item :label="formData.assetProperty==='zy'?'折旧开始日期':'租赁开始日期'" prop="plStartDate">
  259. <el-date-picker
  260. style="width: 150%"
  261. v-model="formData.plStartDate"
  262. type="date"
  263. value-format="x"
  264. :placeholder="formData.assetProperty==='zy'?'请选择折旧开始日期':'请选择租赁开始日期'"
  265. />
  266. </el-form-item>
  267. </el-col>
  268. <el-col :span="8">
  269. <el-form-item :label="formData.assetProperty==='zy'?'已提折旧月数':'已租赁月数'" prop="plMonthed">
  270. <el-input
  271. v-model="formData.plMonthed"
  272. type="number"
  273. :placeholder="formData.assetProperty==='zy'?'请输入已提折旧月数':'请输入已租赁月数'"
  274. />
  275. </el-form-item>
  276. </el-col>
  277. <el-col :span="8">
  278. <el-form-item :label="formData.assetProperty==='zy'?'已提折旧金额':'已租赁金额'" prop="plAmounted">
  279. <el-input
  280. v-model="formData.plAmounted"
  281. @input="handleInput(formData.plAmounted, 'plAmounted')"
  282. :placeholder="formData.assetProperty==='zy'?'请输入已提折旧金额':'已租赁金额'"
  283. />
  284. </el-form-item>
  285. </el-col>
  286. <el-col :span="8">
  287. <el-form-item label="剩余金额" prop="remainAmount">
  288. <el-input
  289. v-model="formData.remainAmount"
  290. @input="handleInput(formData.remainAmount, 'remainAmount')"
  291. placeholder="请输入剩余金额"
  292. />
  293. </el-form-item>
  294. </el-col>
  295. </el-row>
  296. </div>
  297. <div class="title-div">
  298. <el-button @click="qtInfoClick" class="title-button">
  299. <Icon color="black" icon="ep:set-up" :size="18" class="cursor-pointer first-icon" />
  300. <span class="cursor-pointer">{{ t('deviceForm.other') }}</span>
  301. <Icon
  302. color="black"
  303. :icon="qtIsExpanded ? 'fa-solid:angle-double-down' : 'fa-solid:angle-double-right'"
  304. :size="18"
  305. class="cursor-pointer"
  306. />
  307. </el-button>
  308. </div>
  309. <div class="qt-expandable-content" :class="{ 'is-expanded': qtIsExpanded }">
  310. <el-row>
  311. <el-col v-for="field in list" :key="field.sort" :span="8">
  312. <el-form-item label-width="180px" :label="field.name" :prop="field.code" :rules="field.rules">
  313. <!-- 文本输入 -->
  314. <el-input
  315. v-if="field.type === 'text'"
  316. v-model="formData[field.code]"
  317. :placeholder="'请输入' + field.name"
  318. :type="field.type || 'text'"
  319. />
  320. <el-select
  321. v-else-if="field.type === 'enum'"
  322. v-model="formData[field.code]"
  323. :placeholder="'请输入'+field.name"
  324. clearable
  325. filterable
  326. >
  327. <el-option
  328. v-for="item in field.selectOptions.dataSpecsList"
  329. :key="item.value"
  330. :label="item.name"
  331. :value="item.value"
  332. />
  333. </el-select>
  334. <!-- 数字输入 -->
  335. <el-input
  336. v-else-if="field.type === 'int'"
  337. type="number"
  338. v-model="formData[field.code]"
  339. style="width: 150%"
  340. />
  341. <el-input
  342. v-else-if="field.type === 'double'"
  343. v-model="formData[field.code]"
  344. @input="handleInput(formData[field.code], field.code)"
  345. style="width: 150%"
  346. />
  347. <!-- 日期选择 -->
  348. <el-date-picker
  349. v-else-if="field.type === 'date'"
  350. v-model="formData[field.code]"
  351. :type="field.type || 'date'"
  352. :placeholder="'请输入' + field.name"
  353. value-format="YYYY-MM-DD"
  354. style="width: 150%"
  355. />
  356. </el-form-item>
  357. </el-col>
  358. </el-row>
  359. </div>
  360. </el-form>
  361. <el-form>
  362. <el-form-item style="float: right">
  363. <el-button type="success" @click="allzhankai">{{ t('deviceForm.expand') }}</el-button>
  364. <el-button type="info" @click="allshouqi">{{ t('deviceForm.close') }}</el-button>
  365. <el-button v-if="!isDetail" :loading="formLoading" type="warning" @click="submitForm">
  366. {{ t('deviceForm.save') }}
  367. </el-button>
  368. <el-button @click="close" type="primary">{{ t('deviceForm.return') }}</el-button>
  369. </el-form-item>
  370. </el-form>
  371. </ContentWrap>
  372. <BrandList ref="brandFormRef" @choose="brandChoose" />
  373. <ModelList ref="modelFormRef" @choose="modelChoose" :brand = "formData.brand" />
  374. <CustomerList ref="customerZzFormRef" @choose="customerZzChoose" />
  375. <CustomerList ref="customerSupplierFormRef" @choose="customerSupplierChoose" />
  376. </template>
  377. <script setup lang="ts">
  378. import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
  379. import BrandList from '@/views/pms/device/BrandList.vue'
  380. import ModelList from '@/views/pms/device/ModelList.vue'
  381. import CustomerList from '@/views/pms/device/CustomerList.vue'
  382. import { defaultProps, handleTree } from '@/utils/tree'
  383. import * as DeptApi from '@/api/system/dept'
  384. import * as ProductClassifyApi from '@/api/pms/productclassify'
  385. import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
  386. import { useTagsViewStore } from '@/store/modules/tagsView'
  387. import {DeviceAttrModelApi} from "@/api/pms/deviceattrmodel";
  388. import {IotYfClassifyApi} from "@/api/pms/yfclass";
  389. /** 设备台账 表单 */
  390. defineOptions({ name: 'DeviceDetailAddd' })
  391. const baseIsExpanded = ref(true) // 控制表单是否展开的变量
  392. const zzIsExpanded = ref(true) // 控制表单是否展开的变量
  393. const cwIsExpanded = ref(true) // 控制表单是否展开的变量
  394. const qtIsExpanded = ref(true) // 控制表单是否展开的变量
  395. const deptList = ref<Tree[]>([]) // 树形结构
  396. const productClassifyList = ref<Tree[]>([]) // 树形结构
  397. const { delView } = useTagsViewStore() // 视图操作
  398. const { params, name } = useRoute() // 查询参数
  399. const { currentRoute, push } = useRouter()
  400. const id = params.id
  401. const type = params.type
  402. const deptId = params.deptId
  403. const isDetail = params.isDetail
  404. const { t } = useI18n() // 国际化
  405. const message = useMessage() // 消息弹窗
  406. const dialogVisible = ref(false) // 弹窗的是否展示
  407. const dialogTitle = ref('') // 弹窗的标题
  408. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  409. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  410. const brandLabel = ref('') // 表单的类型:create - 新增;update - 修改
  411. const zzLabel = ref('') // 表单的类型:create - 新增;update - 修改
  412. const supplierLabel = ref('') // 表单的类型:create - 新增;update - 修改
  413. const yfclasses = ref([])
  414. const formData = ref({
  415. id: undefined,
  416. deviceCode: undefined,
  417. deviceName: undefined,
  418. yfClass: undefined,
  419. yfCode: undefined,
  420. brand: undefined,
  421. brandName: undefined,
  422. model: undefined,
  423. deptId: undefined,
  424. deviceStatus: undefined,
  425. assetProperty: undefined,
  426. picUrl: undefined,
  427. remark: undefined,
  428. manufacturerId: undefined,
  429. manufacturerName: undefined,
  430. supplierId: undefined,
  431. supplierName: undefined,
  432. manDate: undefined,
  433. nameplate: undefined,
  434. expires: undefined,
  435. plPrice: undefined,
  436. plDate: undefined,
  437. plYear: undefined,
  438. plStartDate: undefined,
  439. plMonthed: undefined,
  440. plAmounted: undefined,
  441. remainAmount: undefined,
  442. infoId: undefined,
  443. infoType: undefined,
  444. infoName: undefined,
  445. infoRemark: undefined,
  446. infoUrl: undefined,
  447. templateJson: undefined,
  448. assetClass: undefined
  449. })
  450. const formRules = reactive({
  451. yfClass: [{ required: true, message: '编码类别不能为空', trigger: 'blur' }],
  452. yfCode: [{ required: true, message: '油服编码不能为空', trigger: 'blur' }],
  453. assetClass: [{ required: true, message: '资产类别不能为空', trigger: 'blur' }],
  454. deviceCode: [{ required: true, message: '设备编码不能为空', trigger: 'blur' }],
  455. deviceName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
  456. brandName: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
  457. deptId: [{ required: true, message: '所在部门不能为空', trigger: 'blur' }],
  458. deviceStatus: [{ required: true, message: '设备状态不能为空', trigger: 'blur' }],
  459. assetProperty: [{ required: true, message: '资产性质不能为空', trigger: 'blur' }],
  460. manufacturerId: [{ required: true, message: '制造商id不能为空', trigger: 'blur' }],
  461. manDate: [{ required: true, message: '生产日期不能为空', trigger: 'blur' }]
  462. })
  463. const list = ref([])
  464. const assetclasschange = () => {
  465. const assetClass = formData.value.assetClass
  466. DeviceAttrModelApi.getDeviceAttrModelListByDeviceCategoryId(assetClass).then(res => {
  467. if (res){
  468. res.forEach((item) => {
  469. if (item.requiredFlag) {
  470. const rule = {required: true, message: item.name+'不能为空', trigger: 'blur'}
  471. item.rules = []
  472. item.rules.push(rule)
  473. }
  474. })
  475. list.value = res
  476. } else {
  477. list.value = []
  478. }
  479. })
  480. }
  481. const handleYfClassChange = async (value) =>{
  482. console.log(value)
  483. const prefix = value.join('')
  484. const last = await IotDeviceApi.getMaxCode(prefix)
  485. formData.value.yfCode = prefix+last
  486. }
  487. const brandChoose = (row) => {
  488. formData.value.brand = row.id
  489. // brandLabel.value = row.value
  490. formData.value.brandName = row.label
  491. }
  492. const brandClear = () =>{
  493. formData.value.brand = undefined
  494. formData.value.brandName = undefined
  495. }
  496. const modelChoose = (row) => {
  497. formData.value.model = row.name
  498. }
  499. const customerSupplierChoose = (row) => {
  500. formData.value.supplierId = row.id
  501. formData.value.supplierName = row.name
  502. // supplierLabel.value = row.name
  503. }
  504. const supplierClear = (row) => {
  505. formData.value.supplierId = undefined
  506. formData.value.supplierName = undefined
  507. }
  508. const customerZzChoose = (row) => {
  509. formData.value.manufacturerId = row.id
  510. // zzLabel.value = row.name
  511. formData.value.manufacturerName = row.name
  512. }
  513. const zzClear = () =>{
  514. formData.value.manufacturerId = undefined
  515. formData.value.manufacturerName = undefined
  516. }
  517. /** 添加/修改操作 */
  518. const brandFormRef = ref()
  519. const openForm = () => {
  520. brandFormRef.value.open()
  521. }
  522. const modelFormRef = ref()
  523. const openModelForm = () =>{
  524. modelFormRef.value.open()
  525. }
  526. const customerSupplierFormRef = ref()
  527. const openCustomerSupplier = () => {
  528. customerSupplierFormRef.value.open()
  529. }
  530. const customerZzFormRef = ref()
  531. const openCustomerZz = () => {
  532. customerZzFormRef.value.open()
  533. }
  534. const allshouqi = () => {
  535. baseIsExpanded.value = false
  536. zzIsExpanded.value = false
  537. cwIsExpanded.value = false
  538. qtIsExpanded.value = false
  539. }
  540. const allzhankai = () => {
  541. baseIsExpanded.value = true
  542. zzIsExpanded.value = true
  543. cwIsExpanded.value = true
  544. qtIsExpanded.value = true
  545. }
  546. const handleInput = (value, obj) => {
  547. // 1. 过滤非法字符(只允许数字和小数点)
  548. let filtered = value.replace(/[^\d.]/g, '')
  549. // 2. 处理多个小数点的情况
  550. filtered = filtered.replace(/\.{2,}/g, '.')
  551. // 3. 限制小数点后最多两位
  552. let decimalParts = filtered.split('.')
  553. if (decimalParts.length > 1) {
  554. decimalParts = decimalParts.slice(0, 2)
  555. filtered = decimalParts.join('.')
  556. }
  557. // 4. 处理以小数点开头的情况(自动补0)
  558. if (filtered.startsWith('.')) {
  559. filtered = '0' + filtered
  560. }
  561. // 5. 更新绑定值(同时处理连续输入多个0的情况)
  562. formData.value[obj] = filtered.replace(/^0+(?=\d)/, '')
  563. }
  564. const close = () => {
  565. delView(unref(currentRoute))
  566. push({ name: 'IotDevicePms', params:{}})
  567. // delView(unref(currentRoute))
  568. // push({
  569. // name: 'IotDevicePms',
  570. // query: {
  571. // date: new Date().getTime()
  572. // }
  573. // })
  574. }
  575. const baseInfoClick = () => {
  576. baseIsExpanded.value = !baseIsExpanded.value // 切换展开状态
  577. }
  578. const zzInfoClick = () => {
  579. zzIsExpanded.value = !zzIsExpanded.value // 切换展开状态
  580. }
  581. const cwInfoClick = () => {
  582. cwIsExpanded.value = !cwIsExpanded.value // 切换展开状态
  583. }
  584. const qtInfoClick = () => {
  585. qtIsExpanded.value = !qtIsExpanded.value // 切换展开状态
  586. }
  587. /** 提交表单 */
  588. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  589. const formRef = ref()
  590. const submitForm = async () => {
  591. // 校验表单
  592. await formRef.value.validate()
  593. // 提交请求
  594. formLoading.value = true
  595. try {
  596. if (list.value) {
  597. list.value = list.value.map(item => ({
  598. ...item,
  599. value: formData.value[item.code] // 自定义属性生成逻辑
  600. }))
  601. formData.value.templateJson = JSON.stringify(list.value)
  602. }
  603. formData.value.yfClass = formData.value.yfClass.join('');
  604. const data = formData.value as unknown as IotDeviceVO
  605. if (formType.value === 'create') {
  606. await IotDeviceApi.createIotDevice(data)
  607. message.success(t('common.createSuccess'))
  608. } else {
  609. await IotDeviceApi.updateIotDevice(data)
  610. message.success(t('common.updateSuccess'))
  611. }
  612. dialogVisible.value = false
  613. // 发送操作成功的事件
  614. //emit('success')
  615. close()
  616. } finally {
  617. formLoading.value = false
  618. }
  619. }
  620. onMounted(async () => {
  621. deptList.value = handleTree(await DeptApi.getSimpleDeptList())
  622. productClassifyList.value = handleTree(
  623. await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList()
  624. )
  625. formData.value.assetProperty = 'zy'
  626. // 修改时,设置数据
  627. if (id) {
  628. formType.value = 'update';
  629. formLoading.value = true
  630. try {
  631. const iotDevice = await IotDeviceApi.getIotDevice(id);
  632. formData.value = iotDevice
  633. formData.value.brandName = iotDevice.brandName;
  634. formData.value.manufacturerName = iotDevice.zzName;
  635. formData.value.supplierName = iotDevice.supplierName;
  636. list.value = JSON.parse(iotDevice.templateJson);
  637. list.value.forEach((item) => {
  638. formData.value[item.code] = item.value;
  639. })
  640. } finally {
  641. formLoading.value = false
  642. }
  643. } else {
  644. if (deptId) {
  645. formData.value.deptId = Number(deptId)
  646. }
  647. formType.value = 'create';
  648. }
  649. await IotYfClassifyApi.getChildrenList().then(res => {
  650. yfclasses.value = res
  651. });
  652. })
  653. /** 重置表单 */
  654. const resetForm = () => {
  655. formData.value = {
  656. id: undefined,
  657. deviceCode: undefined,
  658. deviceName: undefined,
  659. brand: undefined,
  660. model: undefined,
  661. deptId: undefined,
  662. deviceStatus: undefined,
  663. assetProperty: undefined,
  664. picUrl: undefined,
  665. remark: undefined,
  666. manufacturerId: undefined,
  667. supplierId: undefined,
  668. manDate: undefined,
  669. nameplate: undefined,
  670. expires: undefined,
  671. plPrice: undefined,
  672. plDate: undefined,
  673. plYear: undefined,
  674. plStartDate: undefined,
  675. plMonthed: undefined,
  676. plAmounted: undefined,
  677. remainAmount: undefined,
  678. infoId: undefined,
  679. infoType: undefined,
  680. infoName: undefined,
  681. infoRemark: undefined,
  682. infoUrl: undefined,
  683. templateJson: undefined,
  684. assetClass: undefined,
  685. }
  686. formRef.value?.resetFields()
  687. }
  688. </script>
  689. <style scoped lang="scss">
  690. .base-expandable-content {
  691. max-height: 0; /* 初始高度为0 */
  692. overflow: hidden; /* 隐藏溢出的内容 */
  693. transition: max-height 0.3s ease; /* 平滑过渡效果 */
  694. }
  695. .base-expandable-content.is-expanded {
  696. min-height: 260px; /* 或者根据内容设定一个合适的最大高度 */
  697. }
  698. .zz-expandable-content {
  699. max-height: 0; /* 初始高度为0 */
  700. overflow: hidden; /* 隐藏溢出的内容 */
  701. transition: max-height 0.3s ease; /* 平滑过渡效果 */
  702. }
  703. .zz-expandable-content.is-expanded {
  704. min-height: 130px; /* 或者根据内容设定一个合适的最大高度 */
  705. }
  706. .cw-expandable-content {
  707. max-height: 0; /* 初始高度为0 */
  708. overflow: hidden; /* 隐藏溢出的内容 */
  709. transition: max-height 0.3s ease; /* 平滑过渡效果 */
  710. }
  711. .cw-expandable-content.is-expanded {
  712. max-height: 200px; /* 或者根据内容设定一个合适的最大高度 */
  713. }
  714. .qt-expandable-content {
  715. max-height: 0; /* 初始高度为0 */
  716. overflow: hidden; /* 隐藏溢出的内容 */
  717. transition: max-height 0.3s ease; /* 平滑过渡效果 */
  718. }
  719. .qt-expandable-content.is-expanded {
  720. max-height: 1200px; /* 或者根据内容设定一个合适的最大高度 */
  721. }
  722. .title-button{
  723. font-size: 18px;
  724. border: none;
  725. }
  726. .title-div{
  727. margin-bottom: 20px;
  728. margin-top: 10px;
  729. }
  730. .cursor-pointer{
  731. vertical-align: middle;
  732. }
  733. .first-icon{
  734. margin-bottom: 2px;
  735. }
  736. </style>