<template><el-formref="ruleFormRef":model="ruleForm":rules="rules"label-width="auto"class="demo-ruleForm":size="formSize"inline-messagescroll-to-errorstatus-icon><el-row class="title"><el-col :span="24"><div class="bigTitle">信息化项目预算申报</div></el-col></el-row><el-row class="title"><el-col :span="24"><div class="littleTitle">一、基本信息</div></el-col></el-row><div class="content"><el-row><el-col :span="4"><div class="leftLabel">预算构成：</div></el-col><el-col :span="20"><div class="rightContent p-2"><CommonTable:data="tableData":columns="tableColumns":total="total":summaryConfig="false":current-page.sync="page":page-size.sync="pageSize":loading="loading":tableConfig="{ showIndex: true }"@selection-change="handleSelectionChange"><template #indexColumn><div class="flex items-center justify-center"><el-iconsize="20"class="cursor-pointer"color="var(--el-color-primary)"><CirclePlus/></el-icon></div></template><template #操作="{ row }"><div class="h-full flex items-center"><el-space><el-icon size="16"><Remove /></el-icon><el-icon size="16"><CopyDocument /></el-icon></el-space></div></template></CommonTable></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="20"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row></div><el-row class="title"><el-col :span="24"><div class="littleTitle">一、基本信息</div></el-col></el-row><div class="content"><el-row><el-col :span="4"><div class="leftLabel">预算构成：</div></el-col><el-col :span="20"><div class="rightContent"><CommonTable:data="tableData":columns="tableColumns":total="total":summaryConfig="false":current-page.sync="page":page-size.sync="pageSize":loading="loading":tableConfig="{ showIndex: true }"@selection-change="handleSelectionChange"><template #indexColumn><div class="flex items-center justify-center"><el-iconsize="20"class="cursor-pointer"color="var(--el-color-primary)"><CirclePlus/></el-icon></div></template><template #操作="{ row }"><div class="h-full flex items-center"><el-space><el-icon size="16"><Remove /></el-icon><el-icon size="16"><CopyDocument /></el-icon></el-space></div></template></CommonTable></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel"><span class="mr-2 text-red-500">*</span> 预算名称：</div></el-col><el-col :span="20"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row><el-row><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col><el-col :span="4"><div class="leftLabel">预算名称：</div></el-col><el-col :span="8"><div class="rightContent"><el-form-item prop="name"><el-input v-model="ruleForm.name" /></el-form-item></div></el-col></el-row></div></el-form>
</template><script setup>
import CommonTable from "@/components/ComonTable/index.vue";import { computed, reactive, ref } from "vue";
import {Iphone,Location,OfficeBuilding,Tickets,User,
} from "@element-plus/icons-vue";
const tableColumns = ref([{ prop: "date", label: "序号", width: 80, tooltip: true, sortable: true },{ prop: "name", label: "头像", width: 80 },{ prop: "state", label: "用户名" },{ prop: "city", label: "昵称" },{ prop: "address", label: "手机号", width: 150 },{ prop: "zip", label: "邮箱", width: 150, tooltip: true },{ prop: "操作", label: "操作", minWidth: "100", fixed: "right" },
]);
const tableData = ref([{date: "2016-05-01",name: "Tom",state: "California",city: "Los Angeles",address: "No. 189, Grove St, Los Angeles",zip: "CA 90036",},{date: "2016-05-02",name: "Tom",state: "California",city: "Los Angeles",address: "No. 189, Grove St, Los Angeles",zip: "CA 90036",},{date: "2016-05-03",name: "Tom",state: "California",city: "Los Angeles",address: "No. 189, Grove St, Los Angeles",zip: "CA 90036",},
]);const pageSize = ref(10);
const page = ref(1);
const ruleForm = reactive({name: "Hello",region: "",count: "",date1: "",date2: "",delivery: false,location: "",type: [],resource: "",desc: "",
});
const rules = reactive({name: [{required: true,message: "Please input Activity name",trigger: "blur",},{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },],region: [{required: true,message: "Please select Activity zone",trigger: "change",},],count: [{required: true,message: "Please select Activity count",trigger: "change",},],date1: [{type: "date",required: true,message: "Please pick a date",trigger: "change",},],date2: [{type: "date",required: true,message: "Please pick a time",trigger: "change",},],location: [{required: true,message: "Please select a location",trigger: "change",},],type: [{type: "array",required: true,message: "Please select at least one activity type",trigger: "change",},],resource: [{required: true,message: "Please select activity resource",trigger: "change",},],desc: [{required: true,message: "Please input activity form",trigger: "blur",},],
});
</script><style lang="scss" scoped>
.bigTitle {text-align: center;font-weight: bold;font-size: 15px;box-sizing: border-box;height: 100%;line-height: 40px;
}
.littleTitle {font-size: 15px;border-top: 0;height: 100%;line-height: 40px;padding-left: 10px;font-weight: bold;
}
.el-form {border-bottom: 1.5px solid rgb(217, 217, 217);.el-row.title {border-left: 1.5px solid rgb(217, 217, 217);border-right: 1.5px solid rgb(217, 217, 217);}
}.el-row {min-height: 40px;box-sizing: border-box;.el-col {border: 1.5px solid rgb(217, 217, 217);border-bottom: 0;border-right: 0;border-left: 0;}
}
.content {border-left: 1.5px solid rgb(217, 217, 217);.el-col {border-right: 1.5px solid rgb(217, 217, 217);}
}
.leftLabel {height: 100%;background-color: #edf6ff;display: flex;align-items: center;justify-content: flex-end;padding-right: 10px;
}
.rightContent {height: 100%;overflow: hidden;box-sizing: border-box;
}
.rightContent {:deep() {.el-form-item {margin-bottom: 0;.el-input {height: 40px;}.el-select {height: 40px;}}.el-select__wrapper {height: 100%;}.el-switch,.el-checkbox-group,.el-radio-group {margin-left: 11px;}.el-checkbox-group {display: flex;flex-wrap: wrap;}.el-input__wrapper,.el-select__wrapper {box-shadow: unset;&:hover,&:focus {box-shadow: unset;}}.el-textarea__inner {box-shadow: unset;&:focus {box-shadow: unset;}}}
}
</style>
