122 lines
4.4 KiB
Vue
122 lines
4.4 KiB
Vue
|
<template>
|
||
|
|
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="1200px">
|
||
|
|
<el-scrollbar>
|
||
|
|
<el-form :inline="false" :model="form" class="form-two" label-width="auto" :rules="rules" ref="formRef">
|
||
|
|
<el-form-item label="事件名称">
|
||
|
|
<el-input v-model="form.name" placeholder="请输入事件名称" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="发生事件">
|
||
|
|
<el-input v-model="form.code" placeholder="请输入发生事件" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="发生地点">
|
||
|
|
<el-input v-model="form.remark" placeholder="请输入发生地点" />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="事件简介">
|
||
|
|
<el-input
|
||
|
|
v-model="form.code"
|
||
|
|
placeholder="请输入事件简介"
|
||
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
|
|
type="textarea"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="事件经过">
|
||
|
|
<el-input
|
||
|
|
v-model="form.code"
|
||
|
|
placeholder="请输入事件经过"
|
||
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
|
|
type="textarea"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="处理措施">
|
||
|
|
<el-input
|
||
|
|
v-model="form.code"
|
||
|
|
placeholder="请输入处理措施"
|
||
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
|
|
type="textarea"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="治理效果">
|
||
|
|
<el-input
|
||
|
|
v-model="form.code"
|
||
|
|
placeholder="请输入治理效果"
|
||
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
|
|
type="textarea"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="附件">
|
||
|
|
<el-upload v-model:file-list="fileList" action="" multiple :limit="3" :on-exceed="handleExceed">
|
||
|
|
<el-button type="primary">Click to upload</el-button>
|
||
|
|
<template #tip>
|
||
|
|
<div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
|
||
|
|
</template>
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-scrollbar>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submit">确认</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, inject } from 'vue'
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||
|
|
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const title = ref('')
|
||
|
|
const tableStore = inject('tableStore') as TableStore
|
||
|
|
const formRef = ref()
|
||
|
|
const fileList = ref([])
|
||
|
|
// 注意不要和表单ref的命名冲突
|
||
|
|
const form = reactive<anyObj>({
|
||
|
|
code: '',
|
||
|
|
name: '',
|
||
|
|
remark: '',
|
||
|
|
id: ''
|
||
|
|
})
|
||
|
|
const rules = {
|
||
|
|
name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
|
||
|
|
code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleExceed = (files: any, uploadFiles: any) => {}
|
||
|
|
|
||
|
|
const open = (text: string, data?: anyObj) => {
|
||
|
|
title.value = text
|
||
|
|
dialogVisible.value = true
|
||
|
|
if (data) {
|
||
|
|
// 表单赋值
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = data[key]
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// 在此处恢复默认表单
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const submit = () => {
|
||
|
|
formRef.value.validate(async (valid: boolean) => {
|
||
|
|
if (valid) {
|
||
|
|
if (form.id) {
|
||
|
|
// await update(form)
|
||
|
|
} else {
|
||
|
|
// await create(form)
|
||
|
|
}
|
||
|
|
ElMessage.success('保存成功')
|
||
|
|
tableStore.index()
|
||
|
|
dialogVisible.value = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|