| | |
| | | <template> |
| | | <el-dialog v-model="visible" :title="dialogTitle" @closed="handleClosed" destroy-on-close> |
| | | <el-form ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px"> |
| | | <el-dialog v-model="visible" :title="titleEnum[dialogMode]" :close-on-click-modal="false"> |
| | | <div v-if="readonly"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <div>设备信息: {{ formData.deviceName }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>设备类型: {{ formData.deviceType }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>设备属性: {{ formData.deviceAtt }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>型号: {{ formData.deviceModel }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>所属部门: {{ formData.belongDept }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>负责人: {{ formData.charger }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>联系电话: {{ formData.contactPhone }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="设备名称" prop="deviceName"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="规格" prop="deviceSpecification"> |
| | | <el-input v-model="formData.deviceSpecification" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="生产厂商" prop="manufacturer"> |
| | | <el-input v-model="formData.manufacturer" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="来源" prop="source"> |
| | | <el-input v-model="formData.source" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="用途" prop="purpose"> |
| | | <el-input v-model="formData.purpose" maxlength="50" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属部门" prop="belongDept"> |
| | | <el-tree-select |
| | | v-model="formData.belongDept" |
| | |
| | | :data="deptTree" |
| | | :props="treeProps" |
| | | check-strictly |
| | | @change="getUserList" |
| | | @change="belongDeptChange" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="负责人" prop="charger"> |
| | | <el-select v-model="formData.charger" placeholder="请选择" :disabled="!formData.belongDept" clearable> |
| | | <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" /> |
| | | <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.name" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button |
| | | v-if="!dialogReadonly" |
| | | type="primary" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | <el-button @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit"> |
| | | 确定 |
| | | </el-button> |
| | | </template> |
| | |
| | | import { ElMessage } from 'element-plus' |
| | | import { fwDeviceDetailApi, fwDeviceSubmitApi } from '@/views/aICrudTemplate/aICrudTemplateApi' |
| | | import { getUserListApi } from '@/api/system/user' |
| | | import { fieldRules } from '@ztzf/utils' |
| | | import { contactPhoneRules, fieldRules } from '@ztzf/utils' |
| | | |
| | | const initForm = () => ({ |
| | | belongDept: '', // 所属部门 |
| | |
| | | deviceAtt: '', // 设备属性 |
| | | deviceType: '', // 设备类型 |
| | | deviceModel: '', // 型号 |
| | | deviceSpecification: '', // 规格 |
| | | deviceName: '', // 设备名称 |
| | | manufacturer: '', // 生产厂商 |
| | | purpose: '', // 用途 |
| | | source: '', // 来源 |
| | | }) |
| | | const treeProps = { |
| | | label: 'name', |
| | |
| | | const emit = defineEmits(['success']) |
| | | const formRef = ref(null) // 表单实例 |
| | | const formData = ref(initForm()) // 表单数据 |
| | | const visible = ref(false) // 弹框显隐 |
| | | const visible = defineModel() // 弹框显隐 |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const userList = ref([]) // 用户列表 |
| | | |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const dialogTitle = computed(() => { |
| | | if (dialogMode.value === 'edit') { |
| | | return '编辑' |
| | | } else if (dialogMode.value === 'view') { |
| | | return '查看' |
| | | } else { |
| | | return '新增' |
| | | } |
| | | }) |
| | | const readonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | |
| | | const rules = { |
| | | deviceName: fieldRules(true, 50), |
| | | deviceType: fieldRules(true, 0), |
| | | deviceAtt: fieldRules(true, 0), |
| | | deviceType: fieldRules(true), |
| | | deviceAtt: fieldRules(true), |
| | | deviceModel: fieldRules(true, 50), |
| | | deviceSpecification: fieldRules(true, 50), |
| | | manufacturer: fieldRules(true, 50), |
| | | source: fieldRules(true, 50), |
| | | purpose: fieldRules(true, 50), |
| | | belongDept: fieldRules(true, 50), |
| | | contactPhone: fieldRules(true, 50), |
| | | charger: fieldRules(true, 0), |
| | | belongDept: fieldRules(true), |
| | | contactPhone: contactPhoneRules(true, 50), |
| | | charger: fieldRules(true), |
| | | } |
| | | |
| | | function getUserList(val) { |
| | | // 部门重置 |
| | | function belongDeptChange() { |
| | | formData.value.charger = '' |
| | | if (val) { |
| | | getUserListApi(val).then(res => { |
| | | userList.value = res.data.data.records |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // 获取用户列表 |
| | | function getUserList() { |
| | | getUserListApi(formData.value.belongDept).then(res => { |
| | | userList.value = res.data.data.records ?? [] |
| | | }) |
| | | } |
| | | |
| | | // 关闭弹框 |
| | |
| | | formData.value = res?.data?.data ?? {} |
| | | } |
| | | |
| | | // 关闭后重置 |
| | | function handleClosed() { |
| | | formData.value = initForm() |
| | | } |
| | | |
| | | // 打开弹框 |
| | | async function open({ mode, row } = {}) { |
| | | dialogMode.value = mode || 'add' |
| | | formData.value = row |
| | | visible.value = true |
| | | if (dialogMode.value === 'add') { |
| | | formData.value = initForm() |
| | | } else { |
| | | await loadDetail() |
| | | } |
| | | formData.value = dialogMode.value === 'add' ? initForm() : row |
| | | dialogMode.value !== 'add' && (await loadDetail()) |
| | | } |
| | | |
| | | watch(() => formData.value.belongDept, getUserList) |
| | | |
| | | defineExpose({ open }) |
| | | </script> |