| | |
| | | <template> |
| | | <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建目标指标分解" width="50%" draggable> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form :model="form" label-width="120px"> |
| | | <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules"> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="责任部门" size="default"> |
| | | <el-select v-model="form.region" style="width: 100%"> |
| | | <el-option label="Zone one" value="shanghai" /> |
| | | <el-option label="Zone two" value="beijing" /> |
| | | </el-select> |
| | | <el-form-item label="责任部门" prop="dutyDepartmentId" size="default"> |
| | | <el-tree-select v-model="form.dutyDepartmentId" :data="data" class="w100" placeholder="请选择" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="考核指标" size="default"> |
| | | <el-input v-model="form.name" /> |
| | | <el-form-item label="考核指标" prop="value" size="default"> |
| | | <el-input v-model="form.value" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="制定人部门" size="default"> |
| | | <el-select v-model="form.region" style="width: 100%"> |
| | | <el-option label="Zone one" value="shanghai" /> |
| | | <el-option label="Zone two" value="beijing" /> |
| | | </el-select> |
| | | <el-form-item label="制定人部门" prop="makerDepartmentId" size="default"> |
| | | <el-tree-select v-model="form.makerDepartmentId" :data="data" class="w100" placeholder="请选择" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="11" :offset="2"> |
| | | <el-form-item label="制定日期" size="default"> |
| | | <el-date-picker v-model="form.date1" type="date" style="width: 100%" /> |
| | | <el-form-item label="制定日期" prop="makeDate" size="default"> |
| | | <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="11"> |
| | | <el-form-item label="上报人" size="default"> |
| | | <el-input v-model="form.name"> |
| | | <el-form-item label="上报人" prop="commitPersonId" size="default"> |
| | | <el-input v-model="form.commitPersonId"> |
| | | <template #append> <el-button :icon="Search" @click="openUser" /> </template |
| | | ></el-input> |
| | | </el-form-item> |
| | |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button> |
| | | <el-button @click="dialogVisible = false" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> |
| | | <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <DailogSearchUser ref="Show"></DailogSearchUser> |
| | | <DailogSearchUser ref="Show" @SearchUser="onUser"></DailogSearchUser> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive } from 'vue'; |
| | | import { Search, FullScreen } from '@element-plus/icons-vue'; |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue'; |
| | | export default defineComponent({ |
| | | components: { DailogSearchUser }, |
| | | setup() { |
| | | const form = reactive({ |
| | | name: '', |
| | | region: '', |
| | | date1: '', |
| | | date2: '', |
| | | delivery: false, |
| | | type: [], |
| | | resource: '', |
| | | desc: '', |
| | | setup(props,{emit}) { |
| | | const form = ref({ |
| | | dutyDepartmentId: "", ////责任部门/外键 |
| | | makerDepartmentId: "", ////制定人部门/外键 |
| | | commitPersonId: "", ////上报人/外键 |
| | | value: '', ////考核指标值 |
| | | makeDate: "", ////制定日期 |
| | | }); |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | const rules = reactive<FormRules>({ |
| | | dutyDepartmentId: [ |
| | | { |
| | | required: true, |
| | | message: '责任部门不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | makerDepartmentId: [ |
| | | { |
| | | required: true, |
| | | message: '制定人部门不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | commitPersonId: [ |
| | | { |
| | | required: true, |
| | | message: '上报人不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | value: [ |
| | | { |
| | | required: true, |
| | | message: '考核指标值不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | makeDate: [ |
| | | { |
| | | required: true, |
| | | message: '制定日期不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | }); |
| | | const submitForm = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | dialogVisible.value = false; |
| | | emit("onAdd",form.value) |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | formEl.resetFields(); |
| | | }; |
| | | |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | dialogVisible.value = false; |
| | | }; |
| | | // 开启弹窗 |
| | | const dialogVisible = ref(false); |
| | | const openDailog = () => { |
| | |
| | | full.value = false; |
| | | } |
| | | }; |
| | | const data = [ |
| | | { |
| | | value: '1', |
| | | label: '广汇能源综合物流发展有限责任公司', |
| | | children: [ |
| | | { |
| | | value: '11', |
| | | label: '经营班子', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: '生产运行部', |
| | | children: [ |
| | | { |
| | | value: '21', |
| | | label: '灌装一班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '22', |
| | | label: '工艺四班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: '设备部', |
| | | children: [ |
| | | { |
| | | value: '31', |
| | | label: '仪表班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '32', |
| | | label: '机修班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | const onUser = (e:any) => { |
| | | form.value.commitPersonId=e.id |
| | | }; |
| | | return { |
| | | form, |
| | | dialogVisible, |
| | |
| | | full, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | data, |
| | | onUser, |
| | | ruleFormRef, |
| | | rules, |
| | | submitForm, |
| | | resetForm |
| | | }; |
| | | }, |
| | | }); |