<template>
|
<div class="app-container">
|
<div style="">
|
<Titlename title="申请延期"></Titlename>
|
<div class="whole-form">
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
|
style="margin: 0 14% 0 16%;">
|
<el-row>
|
<el-col :span="9">
|
<el-form-item label="申请限改时间：" prop="name">
|
<el-date-picker
|
v-model="value1"
|
type="date"
|
:disabled="true"
|
placeholder="选择日期"
|
style="width: 100%">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22">
|
<el-form-item label="附件上传" prop="desc">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:file-list="fileList"
|
:before-upload="beforeUpload"
|
:auto-upload="true">
|
<el-button slot="trigger" size="small" type="primary" class="btn">选择文件</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传.jpg,.gif,.bmp,.png,.jpeg格式的图片</div>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22">
|
<el-form-item label="备注" prop="desc">
|
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22">
|
<el-form-item style="text-align: center;">
|
<el-button class="btn" size="small" type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
<el-button size="small" @click="close()">关闭</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import Titlename from "../../components/Titlename/index.vue";
|
|
export default {
|
components: {Titlename},
|
name: "applicationForExtension",
|
data() {
|
return {
|
ruleForm: {
|
name: '',
|
region: '',
|
date1: '',
|
date2: '',
|
delivery: false,
|
type: [],
|
resource: '',
|
value1: '',
|
desc: ''
|
},
|
rules: {},
|
tableData: [{
|
date: ' 1',
|
name: '超级管理员',
|
province: '2022-04-07 16:10:27',
|
city: '',
|
address: '已发送众泰煤焦化安全环保部',
|
}, {
|
date: ' 1',
|
name: '超级管理员',
|
province: '2022-04-07 16:10:27',
|
city: '',
|
address: '已发送众泰煤焦化安全环保部',
|
}, {
|
date: ' 1',
|
name: '超级管理员',
|
province: '2022-04-07 16:10:27',
|
city: '',
|
address: '已发送众泰煤焦化安全环保部',
|
}],
|
fileList: [],
|
|
};
|
},
|
methods: {
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert('submit!');
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
beforeUpload(file) {
|
var FileExt = file.name.replace(/.+\./, "");
|
if (['jpg','png','bmp','gif','jpeg'].indexOf(FileExt.toLowerCase()) === -1){
|
this.$message({
|
type: 'warning',
|
message: '请上传后缀名为jpg、png、bmp、gif、jpeg的图片！'
|
});
|
return false;
|
}
|
},
|
close(){
|
this.$router.push({
|
path:"/hiddenDangerRectification"
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
height: 850px;
|
overflow-y: auto;
|
}
|
/deep/ .el-textarea__inner{
|
height: 80px;
|
max-height: 80px;
|
overflow-y: auto
|
}
|
.btn{
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
/*.el-button:hover {*/
|
/* background: #66b1ff;*/
|
/* border-color: #66b1ff;*/
|
/* color: #FFF;*/
|
/*}*/
|
</style>
|
