From 870d0b78a4da7ee5ec4ba9c18609a3ca09621e78 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期二, 12 七月 2022 16:24:20 +0800 Subject: [PATCH] 目标 --- src/views/goalManagement/TargetBook/component/DailogAdd.vue | 142 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 142 insertions(+), 0 deletions(-) diff --git a/src/views/goalManagement/TargetBook/component/DailogAdd.vue b/src/views/goalManagement/TargetBook/component/DailogAdd.vue new file mode 100644 index 0000000..4d7d2da --- /dev/null +++ b/src/views/goalManagement/TargetBook/component/DailogAdd.vue @@ -0,0 +1,142 @@ +<template> + <el-dialog v-model="dialogVisible" title="新建目标责任书" width="50%" draggable> + <el-form :model="form" label-width="120px"> + <el-row> + <el-col :span="24"> + <el-form-item label="岗位"> + <el-input v-model="form.name" placeholder="请选择"> + <template #append> <el-button :icon="Search" @click="daiInpt" /> </template + ></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item label="责任书签订日期"> + <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item label="备注信息"> + <el-input v-model="form.name" type="textarea" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item label="责任书附件"> + <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">添加相关附件</div> + </template> + </el-upload> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="dialogVisible = false" size="default">关闭</el-button> + <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + </span> + </template> + </el-dialog> + <DailogSearch ref="Shows"></DailogSearch> +</template> +<script lang="ts"> +import { defineComponent, ref, reactive } from 'vue'; +import { Search } from '@element-plus/icons-vue'; +import DailogSearch from './DailogSearch.vue'; +import { ElMessage, ElMessageBox } from 'element-plus'; +import type { UploadProps, UploadUserFile } from 'element-plus'; +export default defineComponent({ + components: { DailogSearch }, + setup() { + const dialogVisible = ref<boolean>(false); + const form = reactive({ + name: '', + region: '', + date1: '', + date2: '', + delivery: false, + type: [], + resource: '', + desc: '', + }); + const openDailog = (type: string, value: any, projectList: any, projectId: string) => { + dialogVisible.value = true; + }; + // 导航 + const activeName = ref('1'); + // 表格 + + // 安全目标指标弹窗 + const Shows = ref(); + const daiInpt = () => { + Shows.value.openDailog(); + }; + // 点击上传 + const fileList = ref<UploadUserFile[]>([ + { + name: 'element-plus-logo.svg', + url: 'https://element-plus.org/images/element-plus-logo.svg', + }, + { + name: 'element-plus-logo2.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(`Cancel the transfert of ${uploadFile.name} ?`).then( + () => true, + () => false + ); + }; + return { + form, + dialogVisible, + openDailog, + activeName, + Shows, + daiInpt, + Search, + fileList, + handleRemove, + handlePreview, + handleExceed, + beforeRemove + }; + }, +}); +</script> +<style scoped> +.el-row { + padding: 0 0 20px 0; +} +</style> \ No newline at end of file -- Gitblit v1.9.2