|
|
@@ -1,263 +0,0 @@
|
|
|
-<template>
|
|
|
- <Dialog :title="dialogTitle" v-model="dialogVisible">
|
|
|
- <el-form
|
|
|
- ref="formRef"
|
|
|
- :model="formData"
|
|
|
- :rules="formRules"
|
|
|
- label-width="100px"
|
|
|
- v-loading="formLoading"
|
|
|
- >
|
|
|
-<!-- <el-form-item label="部门id" prop="deptId">
|
|
|
- <el-input v-model="formData.deptId" placeholder="请输入部门id" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="所属组织" prop="orgName">
|
|
|
- <el-input v-model="formData.orgName" placeholder="请输入所属组织" />
|
|
|
- </el-form-item>-->
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="设备类别" prop="deviceType">
|
|
|
- <el-tree-select
|
|
|
- v-model="formData.deviceType"
|
|
|
- :data="productClassifyList"
|
|
|
- :props="defaultProps"
|
|
|
- check-strictly
|
|
|
- node-key="id"
|
|
|
- placeholder="请选择设备类别"
|
|
|
- @change="assetclasschange"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="设备部件" prop="deviceComponent">
|
|
|
- <el-input v-model="formData.deviceComponent" placeholder="请输入设备部件" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <div v-for="(dynamicItem, index) in dynamicItems" :key="index">
|
|
|
- <el-form-item label="填写信息" prop="fillInfo" :for="`dynamic-${index}`" >
|
|
|
- <el-input v-model="dynamicItems[index]" :id="`dynamic-${index}`" placeholder="请输入填写信息"/>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div style="margin-left:30px">
|
|
|
- <el-button type="success" @click="addDynamicItem">添加</el-button>
|
|
|
- <el-button type="danger" @click="removeDynamicItem(index)">移除</el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
-
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
|
|
- <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- </template>
|
|
|
- </Dialog>
|
|
|
-</template>
|
|
|
-<script setup lang="ts">
|
|
|
-import { IotOpeationModelApi, IotOpeationModelVO } from '@/api/pms/iotopeationmodel'
|
|
|
-import {DeviceAttrModelApi} from "@/api/pms/deviceattrmodel";
|
|
|
-import {defaultProps,handleTree} from "@/utils/tree";
|
|
|
-import * as DeptApi from "@/api/system/dept";
|
|
|
-import * as ProductClassifyApi from "@/api/pms/productclassify";
|
|
|
-import {IotDeviceApi} from "@/api/pms/device";
|
|
|
-import {object} from "vue-types";
|
|
|
-import {userInfo} from "os";
|
|
|
-import {UserInfo} from "@/layout/components/UserInfo";
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-/** 运行记录模板主 表单 */
|
|
|
-defineOptions({ name: 'IotOpeationModelForm' })
|
|
|
-const deptInfo = defineProps(['dept'])
|
|
|
-const { t } = useI18n() // 国际化
|
|
|
-const message = useMessage() // 消息弹窗
|
|
|
-const list = ref([])
|
|
|
-
|
|
|
-const deptList = ref<Tree[]>([]) // 树形结构
|
|
|
-const productClassifyList = ref<Tree[]>([]) // 树形结构
|
|
|
-const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
-const dialogTitle = ref('') // 弹窗的标题
|
|
|
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
|
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
-const { params, name } = useRoute() // 查询参数
|
|
|
-const id = params.id
|
|
|
-const brandLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
-const zzLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
-const supplierLabel = ref('') // 表单的类型：create - 新增；update - 修改
|
|
|
-
|
|
|
-
|
|
|
-import { ref } from 'vue';
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-const fixedItems = ref([
|
|
|
- { label: '设备类别', value: '' },
|
|
|
- { label: '设备部件', value: '' }
|
|
|
-]);
|
|
|
-
|
|
|
-const comp = ref([''])//初始化部件数组
|
|
|
-
|
|
|
-function addComp() {
|
|
|
- comp.value.push(''); // 添加一个空字符串作为新的动态项输入框的初始值
|
|
|
-}
|
|
|
-
|
|
|
-function removeComp(index) {
|
|
|
- comp.value.splice(index, 1); // 移除指定索引的动态项
|
|
|
-}
|
|
|
-
|
|
|
-const dynamicItems = ref(['']); // 初始动态项数组
|
|
|
-
|
|
|
-function addDynamicItem() {
|
|
|
- dynamicItems.value.push(''); // 添加一个空字符串作为新的动态项输入框的初始值
|
|
|
-}
|
|
|
-
|
|
|
-function removeDynamicItem(index) {
|
|
|
- dynamicItems.value.splice(index, 1); // 移除指定索引的动态项
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const formData = ref({
|
|
|
- id: undefined,
|
|
|
- deptId: undefined,
|
|
|
- orgName: undefined,
|
|
|
- deviceType: undefined,
|
|
|
- deviceComponent: undefined,
|
|
|
- fillInfo: undefined,
|
|
|
- creName: undefined,
|
|
|
- creDate: undefined,
|
|
|
-})
|
|
|
-const formRules = reactive({
|
|
|
- orgName: [{ required: true, message: '所属组织不能为空', trigger: 'blur' }],
|
|
|
- deviceType: [{ required: true, message: '设备类别不能为空', trigger: 'change' }],
|
|
|
- deviceComponent: [{ required: true, message: '设备部件不能为空', trigger: 'blur' }],
|
|
|
- fillInfo: [{ required: true, message: '填写信息不能为空', trigger: 'blur' }],
|
|
|
- creName: [{ required: true, message: '创建人不能为空', trigger: 'blur' }],
|
|
|
- creDate: [{ required: true, message: '创建日期不能为空', trigger: 'blur' }],
|
|
|
-})
|
|
|
-const formRef = ref() // 表单 Ref
|
|
|
-
|
|
|
-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
|
|
|
- brandLabel.value = iotDevice.brandName;
|
|
|
- zzLabel.value = iotDevice.zzName;
|
|
|
- supplierLabel.value = iotDevice.supplierName;
|
|
|
- list.value = JSON.parse(iotDevice.templateJson);
|
|
|
- list.value.forEach((item) => {
|
|
|
- formData.value[item.identifier] = item.value;
|
|
|
- })
|
|
|
- } finally {
|
|
|
- formLoading.value = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- formType.value = 'create';
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const assetclasschange = () => {
|
|
|
- const deviceType = formData.value.deviceType
|
|
|
- DeviceAttrModelApi.getDeviceAttrModelListByDeviceCategoryId(deviceType).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
|
|
|
- debugger
|
|
|
- } else {
|
|
|
- list.value = []
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-/** 打开弹窗 */
|
|
|
-const open = async (type: string, id?: number) => {
|
|
|
- dialogVisible.value = true
|
|
|
- dialogTitle.value = t('action.' + type)
|
|
|
- formType.value = type
|
|
|
- resetForm()
|
|
|
- // 修改时，设置数据
|
|
|
- if (id) {
|
|
|
- formLoading.value = true
|
|
|
- try {
|
|
|
- formData.value = await IotOpeationModelApi.getIotOpeationModel(id)
|
|
|
- dynamicItems.value = formData.value.fillInfo.split(",")
|
|
|
- } finally {
|
|
|
- formLoading.value = false
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
-
|
|
|
-/** 提交表单 */
|
|
|
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
|
|
-
|
|
|
-const arry = []
|
|
|
-
|
|
|
-const submitForm = async () => {
|
|
|
- // 方法1：使用JavaScript的Date对象
|
|
|
- formData.value.creName = "test";
|
|
|
- if(formData.value.deptId==undefined){
|
|
|
- formData.value.deptId = deptInfo.dept.deptId;
|
|
|
- formData.value.orgName = deptInfo.dept.orgName;
|
|
|
- }
|
|
|
- formData.value.fillInfo = dynamicItems.value.join(",");
|
|
|
- // 提交请求
|
|
|
- formLoading.value = true
|
|
|
- try {
|
|
|
- const data = formData.value as unknown as IotOpeationModelVO
|
|
|
- if (formType.value === 'create') {
|
|
|
- alert(JSON.stringify(data));
|
|
|
- await IotOpeationModelApi.createIotOpeationModel(data)
|
|
|
- message.success(t('common.createSuccess'))
|
|
|
- } else {
|
|
|
- await IotOpeationModelApi.updateIotOpeationModel(data)
|
|
|
- message.success(t('common.updateSuccess'))
|
|
|
- }
|
|
|
- dialogVisible.value = false
|
|
|
- // 发送操作成功的事件
|
|
|
- emit('success')
|
|
|
- } finally {
|
|
|
- formLoading.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/** 重置表单 */
|
|
|
-const resetForm = () => {
|
|
|
- formData.value = {
|
|
|
- id: undefined,
|
|
|
- deptId: undefined,
|
|
|
- orgName: undefined,
|
|
|
- deviceType: undefined,
|
|
|
- deviceComponent: undefined,
|
|
|
- fillInfo: undefined,
|
|
|
- creName: undefined,
|
|
|
- creDate: undefined,
|
|
|
- }
|
|
|
- formRef.value?.resetFields()
|
|
|
- dynamicItems.value = [''];
|
|
|
-}
|
|
|
-</script>
|
yuanchao