<template>
|
<el-dialog
|
title="新增表头"
|
:visible.sync="dialogVisible"
|
width="30%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="sample-dialog">
|
<div class="sample-content">
|
<div class="form-content">
|
<el-form ref="form" :model="form" :rules="rules" label-position="top">
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item label="表头名称" prop="sampleCode">
|
<el-input
|
v-model="form.name"
|
style="width: 100%"
|
placeholder="请输入表头名称"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="表头类型" prop="sampleCode">
|
<el-radio-group v-model="form.type" style="width: 100%">
|
<el-radio-button label="text">文本框</el-radio-button>
|
<el-radio-button label="image">图片上传</el-radio-button>
|
<el-radio-button label="date">日期选择</el-radio-button>
|
<el-radio-button label="user">人员选择</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="操作权限" prop="sampleCode">
|
<el-select v-model="form.role" placeholder="请选择" style="width: 100%" multiple>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="提示文案" prop="sampleCode">
|
<el-input
|
v-model="form.message"
|
style="width: 100%"
|
placeholder="请输入提示文案"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="是否必填" prop="testTypes">
|
<el-radio-group v-model="form.required">
|
<el-radio label="true">是</el-radio>
|
<el-radio label="false">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer select-member-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "AddDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
isIPad: /iPad/i.test(navigator.userAgent),
|
form: {
|
name: "",
|
type: "",
|
role: "",
|
message: "",
|
required: "true",
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入表头名称", trigger: "blur" },
|
],
|
type: [
|
{ required: true, message: "请选择表头类型", trigger: "blur" },
|
],
|
role: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少选择一种检测类型",
|
trigger: "change",
|
},
|
],
|
message: [
|
{
|
required: true,
|
message: "请输入提示文案",
|
trigger: "blur",
|
},
|
],
|
required: [
|
{
|
required: true,
|
message: "请选择是否必填",
|
trigger: "change",
|
},
|
],
|
},
|
options: [{
|
value: '1',
|
label: '黄金糕'
|
}, {
|
value: '2',
|
label: '双皮奶'
|
}, {
|
value: '3',
|
label: '蚵仔煎'
|
}, {
|
value: '4',
|
label: '龙须面'
|
}, {
|
value: '5',
|
label: '北京烤鸭'
|
}],
|
value: ''
|
};
|
},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
},
|
mounted() {
|
// 组件挂载时的初始化逻辑
|
console.log('组件已挂载');
|
},
|
methods: {
|
setFormData(data) {
|
// 设置基础表单数据
|
this.form.name = data.name;
|
this.form.type = data.type;
|
this.form.role = data.role;
|
this.form.message = data.message;
|
this.form.required = data.required || "true";
|
// 重置表单校验状态
|
this.$nextTick(() => {
|
this.$refs.form?.clearValidate();
|
});
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.$refs.form?.resetFields();
|
this.form = {
|
name: "",
|
type: "",
|
role: "",
|
message: "",
|
required: "true",
|
};
|
},
|
handleSubmit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
const submitData = {
|
...this.form,
|
};
|
this.$emit("confirm", submitData);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .el-dialog__body {
|
padding: 0;
|
max-height: calc(100vh - 200px); // 设置最大高度
|
}
|
|
::v-deep .el-dialog {
|
margin-top: 5vh !important; // 调整弹窗位置
|
max-height: 90vh; // 设置弹窗最大高度
|
display: flex;
|
flex-direction: column;
|
|
.el-dialog__body {
|
flex: 1;
|
overflow: hidden; // 防止出现双滚动条
|
|
.el-input__inner {
|
width: 100% !important;
|
}
|
}
|
}
|
|
.sample-dialog {
|
height: 100%;
|
|
.sample-content {
|
background: #ffffff;
|
border-radius: 10px;
|
padding: 20px;
|
height: 100%;
|
display: flex;
|
padding-left: 10%;
|
flex-direction: column;
|
|
.form-content {
|
flex: 1;
|
overflow-y: auto;
|
padding: 0 10px;
|
max-height: calc(90vh - 250px); // 设置内容区域最大高度
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c0c4cc;
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f5f7fa;
|
}
|
}
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
padding: 15px 20px;
|
border-top: 1px solid #e4e7ed;
|
margin-top: auto; // 保持在底部
|
|
button {
|
width: 150px;
|
}
|
}
|
|
.upload-demo {
|
::v-deep {
|
.el-upload--picture-card {
|
width: 120px;
|
height: 120px;
|
line-height: 120px;
|
}
|
|
.el-upload-list--picture-card {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
|
.el-upload-list__item {
|
width: 120px;
|
height: 120px;
|
margin: 0;
|
}
|
}
|
|
// 让上传按钮始终显示在列表最后
|
.el-upload--picture-card {
|
order: 9999;
|
margin: 0;
|
}
|
}
|
|
// 包裹容器也使用flex布局
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
|
&:last-child {
|
margin-bottom: 0; // 最后一行不要margin
|
}
|
}
|
|
::v-deep .el-form-item--small.el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-form-item__label {
|
padding-bottom: 8px;
|
}
|
|
// 优化表单布局
|
::v-deep .el-form {
|
.el-form-item {
|
width: 100% !important;
|
margin-bottom: 15px !important; // 减小表单项间距
|
|
&:last-child {
|
margin-bottom: 15px !important;
|
}
|
}
|
}
|
|
// 优化上传区域布局
|
::v-deep .el-upload-list--picture-card {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px; // 设置图片间距
|
}
|
|
.upload-file {
|
::v-deep {
|
.el-upload-list {
|
margin-top: 10px;
|
}
|
.el-upload-list__item {
|
transition: all 0.3s;
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
}
|
.el-upload__tip {
|
color: #909399;
|
font-size: 12px;
|
margin-top: 8px;
|
}
|
}
|
}
|
</style>
|
