plc设备信息页面优化

hwh

2024-08-21 37c4da42e6bc67a0c40ef1d4f2527a5577f86a2e

 Web/src/views/wcs/wcsPlc/component/editDialog.vue

@@ -14,34 +14,51 @@
               </el-form-item>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="PLCIP地址" prop="ip">
                     <el-input v-model="ruleForm.ip" placeholder="请输入PLCIP地址" maxlength="20" show-word-limit clearable />
							
                     <el-input v-model="ruleForm.ip" placeholder="请输入PLCIP地址" maxlength="20" show-word-limit
                        clearable />

                  </el-form-item>
						

               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="PLC类型" prop="plcType">
                     <el-select clearable v-model="ruleForm.plcType" placeholder="请选择PLC类型">
                        <el-option v-for="(item, index) in dl('PLCEnum')" :key="index"
                           :value="Number(item.value)"
                           :label="`${item.name} (${item.code}) [${item.value}]`"></el-option>

                     </el-select>

                  </el-form-item>

               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="设备类型" prop="type">
                     <el-select clearable v-model="ruleForm.type" placeholder="请选择设备类型">
                        <el-option v-for="(item,index) in dl('PLCTypeEnum')" :key="index" :value="Number(item.value)" :label="`${item.name} (${item.code}) [${item.value}]`"></el-option>
								
                        <el-option v-for="(item, index) in dl('PLCTypeEnum')" :key="index"
                           :value="Number(item.value)"
                           :label="`${item.name} (${item.code}) [${item.value}]`"></el-option>

                     </el-select>
							

                  </el-form-item>
						

               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="仓库号" prop="wareHouseNo">
                     <el-input v-model="ruleForm.wareHouseNo" placeholder="请输入仓库号" maxlength="20" show-word-limit clearable />
							
                     <el-input v-model="ruleForm.wareHouseNo" placeholder="请输入仓库号" maxlength="20" show-word-limit
                        clearable />

                  </el-form-item>
						

               </el-col>
               <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                  <el-form-item label="描述" prop="text">
                     <el-input v-model="ruleForm.text" placeholder="请输入描述" maxlength="100" show-word-limit clearable />
							
                     <el-input v-model="ruleForm.text" placeholder="请输入描述" maxlength="100" show-word-limit
                        clearable />

                  </el-form-item>
						

               </el-col>
            </el-row>
         </el-form>
@@ -61,89 +78,85 @@
}
</style>
<script lang="ts" setup>
   import { ref,onMounted } from "vue";
   import { ElMessage } from "element-plus";
   import type { FormRules } from "element-plus";
   import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
   import { getDictLabelByVal as dv } from '/@/utils/dict-utils';
   import { addWcsPlc, updateWcsPlc, detailWcsPlc } from "/@/api/wcs/wcsPlc";
   import { getAPI } from '/@/utils/axios-utils';
   import { SysEnumApi } from '/@/api-services/api';
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { getDictLabelByVal as dv } from '/@/utils/dict-utils';
import { addWcsPlc, updateWcsPlc, detailWcsPlc } from "/@/api/wcs/wcsPlc";
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';

   //父级传递来的参数
   var props = defineProps({
      title: {
//父级传递来的参数
var props = defineProps({
   title: {
      type: String,
      default: "",
   },
   });
   //父级传递来的函数，用于回调
   const emit = defineEmits(["reloadTable"]);
   const ruleFormRef = ref();
   const isShowDialog = ref(false);
   const ruleForm = ref<any>({});
   //自行添加其他规则
   const rules = ref<FormRules>({
      iP: [{required: true, message: '请输入PLCIP地址！', trigger: 'blur',},],
   });
});
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
   iP: [{ required: true, message: '请输入PLCIP地址！', trigger: 'blur', },],
});

   // 页面加载时
   onMounted(() => {
// 页面加载时
onMounted(() => {

   });
});

   // 打开弹窗
   const openDialog = async (row: any) => {
      // ruleForm.value = JSON.parse(JSON.stringify(row));
      // 改用detail获取最新数据来编辑
      let rowData = JSON.parse(JSON.stringify(row));
      if (rowData.id)
         ruleForm.value = (await detailWcsPlc(rowData.id)).data.result;
      else
         ruleForm.value = rowData;
      isShowDialog.value = true;
   };
// 打开弹窗
const openDialog = async (row: any) => {
   // ruleForm.value = JSON.parse(JSON.stringify(row));
   // 改用detail获取最新数据来编辑
   let rowData = JSON.parse(JSON.stringify(row));
   if (rowData.id)
      ruleForm.value = (await detailWcsPlc(rowData.id)).data.result;
   else
      ruleForm.value = rowData;
   isShowDialog.value = true;
};

   // 关闭弹窗
   const closeDialog = () => {
      emit("reloadTable");
      isShowDialog.value = false;
   };
// 关闭弹窗
const closeDialog = () => {
   emit("reloadTable");
   isShowDialog.value = false;
};

   // 取消
   const cancel = () => {
      isShowDialog.value = false;
   };
// 取消
const cancel = () => {
   isShowDialog.value = false;
};

   // 提交
   const submit = async () => {
      ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
         if (isValid) {
            let values = ruleForm.value;
            if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
               await addWcsPlc(values);
            } else {
               await updateWcsPlc(values);
            }
            closeDialog();
// 提交
const submit = async () => {
   ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
      if (isValid) {
         let values = ruleForm.value;
         if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
            await addWcsPlc(values);
         } else {
            ElMessage({
               message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
               type: "error",
            });
            await updateWcsPlc(values);
         }
      });
   };
         closeDialog();
      } else {
         ElMessage({
            message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
            type: "error",
         });
      }
   });
};






   //将属性或者函数暴露给父组件
   defineExpose({ openDialog });
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>