You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.4 KiB
121 lines
3.4 KiB
<template>
|
|
<Dialog v-model="dialogVisible" :title="dialogTitle" :close-on-click-modal="false">
|
|
<el-form ref="basicFormRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="变更原因" prop="verifyContent">
|
|
<el-input v-model="formData.changeReason" type="textarea" :input-style="{height:'100px'}" maxlength="300" placeholder="请输入变更原因" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button :disabled="formLoading" type="primary" @click="submitForm('success')">确 定</el-button>
|
|
<el-button @click="handleClose('close')">取 消</el-button>
|
|
</template>
|
|
</Dialog>
|
|
|
|
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as EquipmentAccountsApi from '@/api/eam/equipmentAccounts'
|
|
import {ElInput} from "element-plus";
|
|
|
|
defineOptions({ name: 'TeamForm' })
|
|
|
|
const { t } = useI18n() // 国际化
|
|
const message = useMessage() // 消息弹窗
|
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
const dialogTitle = ref('') // 弹窗的标题
|
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
|
const formType = ref('') // 表单的类型
|
|
|
|
|
|
|
|
const formData = ref({
|
|
id:'',
|
|
code:'',
|
|
changeReason: '',
|
|
status:'',
|
|
available:''
|
|
})
|
|
const formRules = reactive({
|
|
changeReason: [
|
|
{ required: true, message: '变更原因不能为空', trigger: 'blur' },
|
|
{ max: 50, message: '不得超过50个字符', trigger: 'blur' }
|
|
],
|
|
})
|
|
const basicFormRef = ref() // 表单 Ref
|
|
|
|
|
|
/** 初始化弹窗 */
|
|
const open = async (type: string, row?: object) => {
|
|
dialogVisible.value = true
|
|
if(type == 'disable'){
|
|
dialogTitle.value = '禁用'
|
|
formData.value.status = 'DISABLE'
|
|
formData.value.available = 'FALSE'
|
|
}else if(type == 'enable'){
|
|
dialogTitle.value = '启用'
|
|
formData.value.status = 'NORMAL'
|
|
formData.value.available = 'TRUE'
|
|
}else{
|
|
dialogTitle.value = t('action.' + type)
|
|
}
|
|
formType.value = type
|
|
//初始化数据
|
|
formData.value.id = row.id
|
|
formData.value.code = row.code
|
|
}
|
|
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
|
|
|
/** 提交表单 */
|
|
const submitForm = async (val) => {
|
|
|
|
// 校验表单
|
|
if (!basicFormRef) return
|
|
const valid = await basicFormRef.value.validate()
|
|
if (!valid) return
|
|
|
|
//发送数据
|
|
await EquipmentAccountsApi.ableEquipmentAccountsMain(formData.value)
|
|
//把success函数传递到父页面
|
|
emit('success',formData.value.id)
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
const handleClose=(val)=>{
|
|
dialogVisible.value = false
|
|
emit('close',val)
|
|
}
|
|
|
|
// 传递给父类
|
|
const emit = defineEmits(['close','success'])
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tag-container {
|
|
margin-top: 10px; /* 可根据需要调整标签容器与表单项之间的间距 */
|
|
border: 1px solid #ccc; /* 添加边框样式 */
|
|
padding: 10px; /* 可根据需要调整容器内边距 */
|
|
width: 950px; /* 设置固定宽度为 950px */
|
|
overflow-y: auto; /* 当内容溢出容器高度时显示滚动条 */
|
|
word-wrap: break-word; /* 使用 word-wrap 属性实现超出范围换行 */
|
|
overflow-wrap: break-word; /* 兼容性更好的写法 */
|
|
flex-wrap: wrap;
|
|
}
|
|
.input-with-button {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.input-with-button > .el-input {
|
|
flex: 1;
|
|
/*margin-right: 10px;*/
|
|
}
|
|
|
|
</style>
|
|
|