前端周记
第一章：入职中睿信
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
入职中睿信第一周
提示：以下是本篇文章正文内容，下面案例可供参考
一、完成仿中台ui界面
主要使用技术栈：vue，css，flex
需要补充学习：sass，layout
二、完成中台功能demo
1.制作登录界面
使用技术栈：vue，css等
实现登录功能
代码如下（示例）：
<template>
<div id="loginForm">
<h1>登录</h1>
<div class="loginForm">
<el-form ref="login" :model="login" :label-position="labelPosition" :rules="rul" label-width="80px">
<el-form-item label="账号(admin)" prop="names">
<el-input v-model="login.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码(123)" prop="passWord">
<el-input v-model="login.passWord" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-button type="primary" @click="loginList(login.name, login.passWord)">登录</el-button>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
// 自定义校验规则
// var adminName = (rule, value, callback) => {
// if (!value) {
// return callback(new Error('请确认操作员'))
// } else if (!(value === this.form.operator)) {
// return callback(new Error('操作员不正确'))
// } else {
// callback()
// }
// }
// {
// ;[{ validator: adminName, trigger: 'blur' }]
// }
return {
labelPosition: 'left',
login: {
name: '',
passWord: ''
}
}
// required: boolean是否必填，如不设置，则会根据校验规则自动生成
// // message:""设置不符合校验规则时的提示信息；
// // trigger:""设置校验的触发方式：
// // ‘change’:数据改变时触发；
// // ‘blur’:失去焦点时触发；
// // 没有进行任何输入时,不会触发change,但一定会触发blur事件。
},
methods: {
loginList(name, pass) {
if (name == 'admin' && pass == '123') {
this.$router.push('/formValidationList')
}
}
}
}
</script>
<style></style>
2.制作列表页面
实现列表的增删改查，复制的功能
代码如下（示例）：
<template>
<div class="table-demo">
<div class="search">
<h1>页面名称</h1>
<div class="searchButton">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<span slot="label">
<span>操作类型</span>
</span>
<el-input placeholder="请输入" class="search" v-model="search"></el-input>
</el-form-item>
<el-form-item>
<span slot="label">
<span>操作员</span>
</span>
<el-input placeholder="请输入" class="search" v-model="search"></el-input>
</el-form-item>
<el-form-item>
<span slot="label">
<span>执行结果</span>
</span>
<el-input placeholder="请输入" class="search" v-model="search"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" id="searchBtn">搜索</el-button>
<el-button @click="restar()">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div class="button">
<el-button size="small" icon="zrx-icon iconcommon_add1" @click="turnTo()">新增</el-button>
<el-button size="small" icon="zrx-icon iconicon_24_common_download" id="importButton">导入</el-button>
<!-- 增 -->
<!-- :visible.sync="add" -->
<!-- <el-dialog title="新增类目">
<el-form :model="addForm">
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作类型</span></span>
<el-input v-model="addForm.type" autocomplete="off"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作员</span></span>
<el-input v-model="addForm.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>执行结果</span></span>
<el-input v-model="addForm.status" autocomplete="off"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作时间</span></span>
<el-input v-model="addForm.time" autocomplete="off"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>耗时</span></span>
<el-input v-model="addForm.useTime" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="add = false">取 消</el-button>
<el-button
type="primary"
@click="
add = false
addInit()
"
>确 定</el-button
>
</div>
</el-dialog> -->
</div>
<!-- 表单列表区域 -->
<el-table :data="tableData" row-key="index">
<el-table-column prop="type" label="操作类型" width="260px"></el-table-column>
<el-table-column prop="operator" label="操作员" width="260px"></el-table-column>
<el-table-column prop="status" label="执行结果" width="260px">
<template slot-scope="scope">
<zrx-status type="success" v-if="scope.row.status == 1">已通过</zrx-status>
<zrx-status type="primary" v-if="scope.row.status == 2">进行中</zrx-status>
<zrx-status type="error" v-if="scope.row.status == 3">驳回</zrx-status>
</template>
</el-table-column>
<el-table-column prop="time" label="操作时间" width="260px" sortable></el-table-column>
<el-table-column prop="useTime" label="耗时(可有可无)" width="260px"></el-table-column>
<el-table-column label="操作" width="260px">
<template slot-scope="scope">
<!-- 改 -->
<el-button type="text" @click="editForm(scope.row, scope.$index)">编辑</el-button>
<!-- <el-dialog title="修改类目" :visible.sync="change">
<el-form :model="changeForm">
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作类型</span></span>
<el-input v-model="changeForm.type" autocomplete="off">{{}}</el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作员</span></span>
<el-input v-model="changeForm.name" autocomplete="off">{{}}</el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>执行结果</span></span>
<el-input v-model="changeForm.status" autocomplete="off">{{}}</el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>操作时间</span></span>
<el-input v-model="changeForm.time" autocomplete="off">{{}}</el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<span slot="label"><span>耗时</span></span>
<el-input v-model="changeForm.useTime" autocomplete="off">{{}}</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="change = false">取 消</el-button>
<el-button type="primary" @click="onSave(scope)">确 定</el-button>
</div>
</el-dialog>
-->
<el-button type="text" @click="copy(scope.row, scope.$index)">复制</el-button>
<!-- :disabled="scope.row.status == 1" -->
<!-- 删 -->
<el-button type="text" @click="deleteIt(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- <div class="addMask"></div> -->
</div>
</template>
<script>
export default {
name: 'tableDemo',
data() {
return {
addForm: {
id: '',
type: '',
operator: '',
status: '',
time: '',
useTime: ''
},
changeForm: {
id: '',
type: '',
operator: '',
status: '',
time: '',
useTime: ''
},
// form: {
// onlineResources: '',
// resourceFormat: '',
// dataDomain: '',
// networkType: '',
// operator: '',
// type: '',
// resourceClass: '',
// update: '',
// providerCode: '',
// systemName: '',
// relationshipResourceCode: '',
// textarea: '',
// secondoperator: ''
// }
form: [
{
id: '0',
type: '乡长批准',
operator: '李云龙',
status: '1',
time: '2017-10-01 12:00',
useTime: '5mins',
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
},
{
id: '1',
type: '校长批准',
operator: '李云龙',
status: '2',
time: '2017-10-01 12:00',
useTime: '5mins',
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
},
{
id: '2',
type: '教师批准',
operator: '李云龙',
status: '3',
time: '2017-10-01 12:00',
useTime: '5mins',
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
},
{
id: '3',
type: '创建项目',
operator: '李云龙',
status: '1',
time: '2017-10-01 12:00',
useTime: '5mins',
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
},
{
id: '4',
type: '更新项目',
operator: '李云龙',
status: '2',
time: '2017-10-01 12:00',
useTime: '5mins',
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
}
],
formInline: {
user: ''
},
dialogTableVisible: false,
// :visible.sync用于控制显示或隐藏弹框
// add: false,
change: false,
formLabelWidth: '120px',
// buttonStatus: ''
search: '',
// search1: '',
// search2: ''
ind: [],
inde: '',
tableData: [],
// 接收formValidation传来的信息
formValidation: {},
// 接收editFormVal改好的数据对象
editFormValidation: {},
editFormVal: {},
editRow: {},
editIndex: '',
editind: ''
}
},
created() {
this.getIt()
this.editIt()
},
methods: {
// 单页面增
// addInit() {
// if (!this.addForm.type) {
// return this.$message({
// message: '请填写操作类型',
// type: 'warning'
// })
// }
// if (!this.addForm.name) {
// return this.$message({
// message: '请填写操作员',
// type: 'warning'
// })
// }
// if (!this.addForm.status) {
// return this.$message({
// message: '执行结果',
// type: 'warning'
// })
// }
// if (!this.addForm.time) {
// return this.$message({
// message: '请填写操作时间',
// type: 'warning'
// })
// }
// if (!this.addForm.useTime) {
// return this.$message({
// message: '请填写耗时',
// type: 'warning'
// })
// }
// this.form.push(this.addForm)
// this.form.id = this.form.length - 1
// console.log(this.form.id)
// this.addForm = {
// type: '',
// name: '',
// status: '',
// time: '',
// useTime: ''
// }
// },
// 跳转页面新增
turnTo() {
this.$router.push('/formValidation')
},
// 删
deleteIt(index) {
this.form.splice(index, 1)
// console.log(index)
},
// 编辑
editForm(rows, indexed) {
console.log('当前行的内容' + rows)
this.editRow = rows
this.editIndex = indexed
console.log('当前行的索引' + indexed)
this.$router.push({
path: 'editFormVal',
query: {
formValidationList: this.editRow,
indexd: this.editIndex
}
})
},
// 改
changeInit(indexs) {
// this.form
if (!this.changeForm.type) {
// buttonStatus = disabled
return this.$message({
message: '请填写操作类型',
type: 'warning'
})
}
if (!this.changeForm.name) {
return this.$message({
message: '请填写操作员',
type: 'warning'
})
}
if (!this.changeForm.status) {
return this.$message({
message: '执行结果',
type: 'warning'
})
}
if (!this.changeForm.time) {
return this.$message({
message: '请填写操作时间',
type: 'warning'
})
}
if (!this.changeForm.useTime) {
return this.$message({
message: '请填写耗时',
type: 'warning'
})
}
// console.log(indexs)
this.form.splice(indexs, 1, this.changeForm)
this.changeForm = {
type: '',
name: '',
status: '',
time: '',
useTime: ''
}
},
// 查
onSubmit() {
// 比较输入框内容和表单元素的type是否包含
for (let i = 0; i < this.form.length; i++) {
if (this.form[i].type.includes(this.search)) {
this.ind.push(this.form[i])
}
}
// return console.log(this.ind)
// for (let i = 0; i < this.form.length; i++) {
// if
// }
},
//重置
restar() {
this.tableData = this.form
// this.n = []
// this.tableData = []
this.ind = []
},
// 复制
copy(row, ind) {
// console.log(row)
// console.log(ind)
this.form.splice(ind, 0, row)
},
// 接收来自校验表单界面的新增行的参数
getIt() {
this.formValidation = this.$route.query.formValidation
console.log('新增内容', this.formValidation)
if (this.formValidation) {
// console.log(this.formValidation)
this.form.push(this.formValidation)
}
// this.form.id = this.form.length - 1 editind
// console.log(this.form.id)
},
// 接收来自编辑表单界面的修改行的参数
editIt() {
this.editFormValidation = this.$route.query.editFormValidation
this.editind = this.$route.query.editind
console.log('修改内容', this.editFormValidation)
console.log('修改索引', this.editind)
if (this.editFormValidation) {
// console.log(this.formValidation)
this.form.splice(this.editind, 1, this.editFormValidation)
}
}
},
watch: {
ind: {
handler(n, o) {
// console.log(111, n)
if (n.length > 0) {
this.tableData = n
} else {
this.tableData = this.form
}
},
// 立即执行
immediate: true
}
}
// computed: {
// tables: function () {
// var search = this.search
// if (search) {
// return this.tableData.filter(function (dataNews) {
// return Object.keys(dataNews).some(function (key) {
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
// })
// })
// }
// return this.tableData
// }
// }
}
</script>
<style scoped lang="stylus">
.table-demo {
// display flex
background-color: #fff;
margin 0 32px 0 32px
.search h1 {
width: 80px;
height: 28px;
font-family: FZLTZCHK--GBK1-0;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 28px;
letter-spacing: 0px;
color: #000000;
}
.button .el-button {
width 80px
height 32px
margin 8px 0 8px 0
}
..el-table {
.el-table-column {
// width 260px
}
}
h4 {
margin-top: 0;
}
.el-table {
margin-bottom: 20px;
}
.demo-table-expand {
font-size: 0;
padding: 0 48px;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
// .addMask {
// width 340px
// height 430px
// background-color pink
// }
}
</style>
<style>
body {
background-color: #f6f7fc;
}
.searchButton .el-form {
margin: 24px 0 0 0;
}
.el-table th.el-table__cell > .cell {
width: 54px;
height: 22px;
font-family: FZLTZCHK--GBK1-0;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 22px;
letter-spacing: 0px;
color: #000000;
}
.el-button.el-button--text {
padding: 0;
}
#importButton {
margin-left: 10px;
}
/* .table-demo .el-button[data-v-6ce76240] {
text-align: left;
} */
.el-form .el-form-item .el-form-item__label {
padding: 0;
text-align: center;
}
.el-form .el-form-item .el-form-item__content {
margin-right: 94px;
}
#searchBtn {
margin-left: 264px;
}
</style>
3.制作新增页面
实现列表的跳转新增的功能
代码如下（示例）：
<template>
<div id="formValidation">
<h1>新建编目</h1>
<div>
<!-- 表单域 -->
<el-form ref="form" :model="form" :label-position="labelPosition" :rules="rules" label-width="80px">
<!-- 下拉框和输入框区域 -->
<div class="select-input">
<!-- 第一列 -->
<div class="list1">
<el-form-item label="在线资源" prop="onlineResources">
<el-select v-model="form.onlineResources" placeholder="请选择在线资源">
<el-option label="资源1" value="onlineResources1"></el-option>
<el-option label="资源2" value="onlineResources2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源格式" prop="resourceFormat">
<el-select v-model="form.resourceFormat" placeholder="请选择资源格式">
<el-option label="格式1" value="resourceFormat1"></el-option>
<el-option label="格式2" value="resourceFormat2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据领域" prop="dataDomain">
<el-select v-model="form.dataDomain" placeholder="请选择数据领域">
<el-option label="领域1" value="dataDomain1"></el-option>
<el-option label="领域2" value="dataDomain2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属网络类型" prop="networkType">
<el-select v-model="form.networkType" placeholder="请选择所属网络类型">
<el-option label="类型1" value="networkType1"></el-option>
<el-option label="类型2" value="networkType2"></el-option>
</el-select>
</el-form-item>
</div>
<!-- 第二列 -->
<div class="list2">
<el-form-item label="操作员" prop="operator">
<el-input v-model="form.operator" placeholder="请输入操作员"></el-input>
</el-form-item>
<el-form-item label="操作类型" prop="type">
<el-select v-model="form.type" placeholder="请选择操作类型">
<el-option label="创建项目" value="创建项目"></el-option>
<el-option label="校长批准" value="校长批准"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源分类" prop="resourceClass">
<el-select v-model="form.resourceClass" placeholder="请选择资源分类">
<el-option label="分类1" value="resourceClass1"></el-option>
<el-option label="分类2" value="resourceClass2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="更新频率" prop="update">
<el-select v-model="form.update" placeholder="请选择更新频率">
<el-option label="频率1" value="update1"></el-option>
<el-option label="频率2" value="update2"></el-option>
</el-select>
</el-form-item>
</div>
<!-- 第三列 -->
<div class="list3">
<div class="pushBox">
<el-form-item label="确认操作员" prop="secondoperator">
<el-input v-model="form.secondoperator" placeholder="请确认操作员" @blur="blur"></el-input>
</el-form-item>
</div>
<el-form-item label="资源提供方代码" prop="providerCode">
<el-input v-model="form.providerCode" placeholder="请输入资源提供方代码"></el-input>
</el-form-item>
<el-form-item label="所属系统名称" prop="systemName">
<el-input v-model="form.systemName" placeholder="请输入所属系统名称"></el-input>
</el-form-item>
<el-form-item label="关系资源代码" prop="relationshipResourceCode">
<el-select v-model="form.relationshipResourceCode" placeholder="请选择关系资源代码">
<el-option label="代码1" value="shanghai"></el-option>
<el-option label="代码2" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</div>
<!-- 文本框区域 -->
<div>
<el-form-item label="资源摘要" class="textarea" prop="textarea">
<el-input type="textarea" v-model="form.textarea" placeholder="请填写资源摘要"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
<el-button @click="cancel">取消</el-button>
<!-- <el-button type="success" @click="tryLog()"></el-button> -->
</el-form-item>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
// 自定义校验规则
var secondResourceName = (rule, value, callback) => {
if (!value) {
return callback(new Error('请确认操作员'))
} else if (!(value === this.form.operator)) {
return callback(new Error('操作员不正确'))
} else {
callback()
}
}
return {
labelPosition: 'top',
form: {
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
operator: '',
type: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: ''
},
// 校验规则
rules: {
name: [
// required: boolean是否必填，如不设置，则会根据校验规则自动生成
// message:""设置不符合校验规则时的提示信息；
// trigger:""设置校验的触发方式：
// ‘change’:数据改变时触发；
// ‘blur’:失去焦点时触发；
// 没有进行任何输入时,不会触发change,但一定会触发blur事件。
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
onlineResources: [{ required: true, message: '选择不能为空', trigger: 'change' }],
resourceFormat: [{ required: true, message: '选择不能为空', trigger: 'change' }],
dataDomain: [{ required: true, message: '选择不能为空', trigger: 'change' }],
networkType: [{ required: true, message: '选择不能为空', trigger: 'change' }],
operator: [
{ required: true, message: '请输入资源名称', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
],
type: [{ required: true, message: '选择不能为空', trigger: 'change' }],
resourceClass: [{ required: true, message: '选择不能为空', trigger: 'change' }],
update: [{ required: true, message: '选择不能为空', trigger: 'change' }],
providerCode: [
{ required: true, message: '请输入资源提供方代码', trigger: 'blur' },
{ min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
],
systemName: [
{ required: true, message: '请输入所属系统名称', trigger: 'blur' },
{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
],
relationshipResourceCode: [{ required: true, message: '选择不能为空', trigger: 'change' }],
textarea: [{ required: true, message: ' 内容未填写', trigger: 'blur' }],
secondoperator: [{ validator: secondResourceName, trigger: 'blur' }]
// operationType:
}
}
},
methods: {
// submitForm(formName) {
// this.$refs[formName].validate((valid) => {
// if (valid) {
// alert('submit!');
// } else {
// console.log('error submit!!');
// return false;
// }
// });
// },
// 提交验证和新增到列表页
onSubmit(listForm) {
// console.log(this.form)
this.$refs[listForm].validate(valid => {
if (valid) {
// alert('提交成功')
this.$router.push({
path: 'formValidationList',
query: {
formValidation: this.form
}
})
} else {
console.log('失败')
return false
}
})
// for (let i = 0; i < this.form.length; i++) {
// if (this.form[i]) {
// this.$router.push('/')
// }
// }
},
cancel() {
this.$router.push({
path: 'formValidationList'
// query: {
// formValidation: this.form
// }
})
},
blur() {
console.log(this.form.operator)
}
// addToList() {
// console.log(this.form)
// }
}
}
</script>
<style scoped>
/* * {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
} */
#formValidation {
/* background-color: skyblue; */
margin: 0 0 0 32px;
}
h1 {
width: 80px;
height: 28px;
font-family: FZLTZCHK--GBK1-0;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 28px;
letter-spacing: 0px;
color: #000000;
}
</style>
<style>
#formValidation .el-form .el-form-item .el-form-item__label {
background-color: #f6f7fc;
border: none;
text-align: left;
}
#formValidation .el-form {
margin: 0;
width: 300px;
}
/* #formValidation .textarea {
width: 1012px;
height: 96px;
} */
#formValidation .textarea .el-textarea__inner {
width: 1020px;
height: 96px;
}
#formValidation .select-input {
display: flex;
}
#formValidation .select-input div {
width: 300px;
margin-right: 60px;
}
#formValidation .select-input .list3 .pushBox {
width: 300px;
height: 94px;
}
#formValidation .el-form .el-form-item .el-form-item__content {
background-color: #f6f7fc;
}
</style>
4.制作编辑页面
实现列表的跳转编辑的功能
代码如下（示例）：
<template>
<div id="formValidation">
<h1>修改编目</h1>
<div>
<!-- 表单域 -->
<el-form ref="form" :model="form" :label-position="labelPosition" :rules="rules" label-width="80px">
<!-- 下拉框和输入框区域 -->
<div class="select-input">
<!-- 第一列 -->
<div class="list1">
<el-form-item label="在线资源" prop="onlineResources">
<el-select v-model="form.onlineResources" placeholder="请选择在线资源">
<el-option label="资源1" value="onlineResources1"></el-option>
<el-option label="资源2" value="onlineResources2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源格式" prop="resourceFormat">
<el-select v-model="form.resourceFormat" placeholder="请选择资源格式">
<el-option label="格式1" value="resourceFormat1"></el-option>
<el-option label="格式2" value="resourceFormat2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据领域" prop="dataDomain">
<el-select v-model="form.dataDomain" placeholder="请选择数据领域">
<el-option label="领域1" value="dataDomain1"></el-option>
<el-option label="领域2" value="dataDomain2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属网络类型" prop="networkType">
<el-select v-model="form.networkType" placeholder="请选择所属网络类型">
<el-option label="类型1" value="networkType1"></el-option>
<el-option label="类型2" value="networkType2"></el-option>
</el-select>
</el-form-item>
</div>
<!-- 第二列 -->
<div class="list2">
<el-form-item label="操作员" prop="operator">
<el-input v-model="form.operator" placeholder="请输入操作员"></el-input>
</el-form-item>
<el-form-item label="操作类型" prop="type">
<el-select v-model="form.type" placeholder="请选择操作类型">
<el-option label="创建项目" value="创建项目"></el-option>
<el-option label="校长批准" value="校长批准"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源分类" prop="resourceClass">
<el-select v-model="form.resourceClass" placeholder="请选择资源分类">
<el-option label="分类1" value="resourceClass1"></el-option>
<el-option label="分类2" value="resourceClass2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="更新频率" prop="update">
<el-select v-model="form.update" placeholder="请选择更新频率">
<el-option label="频率1" value="update1"></el-option>
<el-option label="频率2" value="update2"></el-option>
</el-select>
</el-form-item>
</div>
<!-- 第三列 -->
<div class="list3">
<div class="pushBox">
<el-form-item label="确认操作员" prop="secondoperator">
<el-input v-model="form.secondoperator" placeholder="请确认操作员" @blur="blur"></el-input>
</el-form-item>
</div>
<el-form-item label="资源提供方代码" prop="providerCode">
<el-input v-model="form.providerCode" placeholder="请输入资源提供方代码"></el-input>
</el-form-item>
<el-form-item label="所属系统名称" prop="systemName">
<el-input v-model="form.systemName" placeholder="请输入所属系统名称"></el-input>
</el-form-item>
<el-form-item label="关系资源代码" prop="relationshipResourceCode">
<el-select v-model="form.relationshipResourceCode" placeholder="请选择关系资源代码">
<el-option label="代码1" value="shanghai"></el-option>
<el-option label="代码2" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
</div>
<!-- 文本框区域 -->
<div>
<el-form-item label="资源摘要" class="textarea" prop="textarea">
<el-input type="textarea" v-model="form.textarea" placeholder="请填写资源摘要"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
<el-button @click="cancel">取消</el-button>
<!-- <el-button type="success" @click="tryLog()"></el-button> -->
</el-form-item>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
// 自定义校验规则
var secondResourceName = (rule, value, callback) => {
if (!value) {
return callback(new Error('请确认操作员'))
} else if (!(value === this.form.operator)) {
return callback(new Error('操作员不正确'))
} else {
callback()
}
}
return {
labelPosition: 'top',
form: {
onlineResources: '',
resourceFormat: '',
dataDomain: '',
networkType: '',
operator: '',
type: '',
resourceClass: '',
update: '',
providerCode: '',
systemName: '',
relationshipResourceCode: '',
textarea: '',
secondoperator: '',
// 接收formValidationList传来的数据
formValidationList: {},
indexd: ''
},
// 校验规则
rules: {
name: [
// required: boolean是否必填，如不设置，则会根据校验规则自动生成
// message:""设置不符合校验规则时的提示信息；
// trigger:""设置校验的触发方式：
// ‘change’:数据改变时触发；
// ‘blur’:失去焦点时触发；
// 没有进行任何输入时,不会触发change,但一定会触发blur事件。
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
onlineResources: [{ required: true, message: '选择不能为空', trigger: 'change' }],
resourceFormat: [{ required: true, message: '选择不能为空', trigger: 'change' }],
dataDomain: [{ required: true, message: '选择不能为空', trigger: 'change' }],
networkType: [{ required: true, message: '选择不能为空', trigger: 'change' }],
operator: [
{ required: true, message: '请输入资源名称', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
],
type: [{ required: true, message: '选择不能为空', trigger: 'change' }],
resourceClass: [{ required: true, message: '选择不能为空', trigger: 'change' }],
update: [{ required: true, message: '选择不能为空', trigger: 'change' }],
providerCode: [
{ required: true, message: '请输入资源提供方代码', trigger: 'blur' },
{ min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
],
systemName: [
{ required: true, message: '请输入所属系统名称', trigger: 'blur' },
{ min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
],
relationshipResourceCode: [{ required: true, message: '选择不能为空', trigger: 'change' }],
textarea: [{ required: true, message: ' 内容未填写', trigger: 'blur' }],
secondoperator: [{ validator: secondResourceName, trigger: 'blur' }]
// operationType:
}
}
},
created() {
console.log(this.getEditList())
},
methods: {
// submitForm(formName) {
// this.$refs[formName].validate((valid) => {
// if (valid) {
// alert('submit!');
// } else {
// console.log('error submit!!');
// return false;
// }
// });
// },
// 提交验证和新增到列表页
onSubmit(listForm) {
// console.log(this.form)
this.$refs[listForm].validate(valid => {
if (valid) {
// alert('提交成功')
this.$router.push({
path: 'formValidationList',
query: {
editFormValidation: this.form,
editind: this.indexd
}
})
} else {
console.log('失败')
return false
}
})
// for (let i = 0; i < this.form.length; i++) {
// if (this.form[i]) {
// this.$router.push('/')
// }
// }
},
cancel() {
this.$router.push({
path: 'formValidationList'
// query: {
// formValidation: this.form
// }
})
},
blur() {
console.log(this.form.operator)
},
// addToList() {
// console.log(this.form)
// }
// 接收来自列表的修改行参数
getEditList() {
// if (this.formValidationList) {
// }
// 拿到了编辑行内容
this.formValidationList = this.$route.query.formValidationList
// 拿到了编辑行的索引
this.indexd = this.$route.query.indexd
console.log('编辑行的索引' + this.indexd)
console.log(this.formValidationList)
this.form = this.formValidationList
}
}
}
</script>
<style scoped>
/* * {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
} */
#formValidation {
/* background-color: skyblue; */
margin: 0 0 0 32px;
}
h1 {
width: 80px;
height: 28px;
font-family: FZLTZCHK--GBK1-0;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 28px;
letter-spacing: 0px;
color: #000000;
}
</style>
<style>
#formValidation .el-form .el-form-item .el-form-item__label {
background-color: #f6f7fc;
border: none;
text-align: left;
}
#formValidation .el-form {
margin: 0;
width: 300px;
}
/* #formValidation .textarea {
width: 1012px;
height: 96px;
} */
#formValidation .textarea .el-textarea__inner {
width: 1020px;
height: 96px;
}
#formValidation .select-input {
display: flex;
}
#formValidation .select-input div {
width: 300px;
margin-right: 60px;
}
#formValidation .select-input .list3 .pushBox {
width: 300px;
height: 94px;
}
#formValidation .el-form .el-form-item .el-form-item__content {
background-color: #f6f7fc;
}
</style>
总结
查漏补缺，温习已经学会的技术，学习新技术
1012
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
