<template>
|
<div class="comp-container">
|
<el-form :model="clForm" label-width="180px" :rules="clFormRules" ref="clRef">
|
<div class="homeCard">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="申请部门" prop="clDepartment">
|
<el-select v-model="clForm.clDepartment" placeholder="请选择部门">
|
<el-option label="机修班" value="机修班" />
|
<el-option label="火工班" value="火工班" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="申请人" prop="clApplyName">
|
<el-input
|
v-model="clForm.clApplyName"
|
placeholder="请输入"
|
class="input-with-select"
|
>
|
<template #append>
|
<el-button :icon="Search" />
|
</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="断路原因" prop="clReason">
|
<el-input
|
v-model="clForm.clReason"
|
placeholder="请输入"
|
class="input-with-select"
|
type="textarea"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="涉及相关单位（部门）" prop="clUnits">
|
<el-select v-model="clForm.clUnits" placeholder="请选择" multiple>
|
<el-option label="单位一" value="单位一" />
|
<el-option label="单位二" value="单位二" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="断路地段示意图" prop="fileList">
|
<el-upload
|
v-model:file-list="fileList"
|
class="upload-demo"
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
multiple
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-remove="beforeRemove"
|
:limit="3"
|
:on-exceed="handleExceed"
|
>
|
<el-button type="primary">上传附件</el-button>
|
<template #tip>
|
<div class="el-upload__tip">
|
jpg/png 文件大小须在500k以内.
|
</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, ref } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import {useUserInfo} from "/@/stores/userInfo";
|
import { Session } from '/@/utils/storage';
|
import { Search } from '@element-plus/icons-vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
|
let global: any = {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
};
|
|
interface stateType {
|
homeOne: Array <type>
|
}
|
interface type {
|
|
}
|
export default defineComponent({
|
name: 'cutLineForm',
|
props: {
|
clForm: Object
|
},
|
setup(props) {
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const state = reactive<stateType>({});
|
const clForm1 = reactive(props.clForm)
|
const clRef = ref<FormInstance>()
|
const clFormRules = reactive<FormRules>({
|
clDepartment:[{required: true,message: '此处不可为空',trigger: 'blur'}],
|
clApplyName:[{required: true,message: '此处不可为空',trigger: 'blur'}],
|
clReason: [{required: true,message: '此处不可为空',trigger: 'blur'}],
|
clUnits: [{required: true,message: '此处不可为空',trigger: 'blur'}],
|
fileList: [{type: 'array',required: true,message: '此处不可为空',trigger: 'change'}]
|
})
|
const fileList = ref<UploadUserFile[]>([
|
{
|
name: 'element-plus-logo.svg',
|
url: 'https://element-plus.org/images/element-plus-logo.svg',
|
}
|
])
|
|
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
console.log(file, uploadFiles)
|
}
|
|
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
|
console.log(uploadFile)
|
}
|
|
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
|
ElMessage.warning(
|
// `The limit is 3, you selected ${files.length} files this time, add up to ${
|
// files.length + uploadFiles.length
|
// } totally`
|
'文件总数超出限制'
|
)
|
}
|
|
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
return ElMessageBox.confirm(
|
`取消上传 ${uploadFile.name} ?`
|
).then(
|
() => true,
|
() => false
|
)
|
}
|
const validateForm = async () => {
|
let flag = null
|
await clRef.value.validate(valid=>{
|
if(valid){
|
flag = true
|
}else{
|
flag = false
|
}
|
})
|
return flag
|
}
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
};
|
return {
|
renderMenu,
|
clForm1,
|
Search,
|
clFormRules,
|
clRef,
|
fileList,
|
validateForm,
|
handleRemove,
|
handlePreview,
|
handleExceed,
|
beforeRemove,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.home-container {
|
height: 100%;
|
overflow: hidden;
|
.homeCard{
|
width: 100%;
|
padding: 20px;
|
background: #fff;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
}
|
.el-row{
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep{
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
.el-cascader{
|
width: 100% !important;
|
}
|
.submitBtn{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
</style>
|
