新增目标考核弹窗

13937891274

2022-08-11 f26e5679eaacdf0cb70abf5f2b940fcb686df4c1

新增目标考核弹窗

 src/views/goalManagement/safetyAssessment/component/Dailog.vue

@@ -1,5 +1,5 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标分解" width="70%" draggable>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标考核" width="70%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px">
            <el-row>
@@ -30,7 +30,9 @@
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="目标指标分解" name="1"> </el-tab-pane>
            <el-tab-pane label="目标指标分解" name="1">
        <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button>
      </el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
@@ -44,8 +46,8 @@
            <el-table-column align="center" prop="address" label="考核人" />
            <el-table-column align="center" prop="address" label="考核时间" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary">查看</el-button>
                <template #default="scope">
                    <el-button link type="primary" @click="daiAdd('修改', scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
@@ -57,15 +59,18 @@
        </template>
    </el-dialog>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
  <DailogAdd ref="Show" @onAdd="add"></DailogAdd>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue';
import DailogAdd from './DailogAdd.vue';
import { goalManagementApi } from '/@/api/goalManagement';
import {deepClone} from "/@/utils/other";
export default defineComponent({
    components: { DailogSearch },
    components: { DailogSearch ,DailogAdd},
    setup() {
        const dialogVisible = ref<boolean>(false);
        const form = ref({});
@@ -101,6 +106,31 @@
        const daiInpt = () => {
            Shows.value.openDailog(targetType.value);
        };

    // 新增弹窗
    const index=ref<any>()
    const Show = ref();
    const daiAdd = (title: string, data: any) => {
      // index.value = formUp.targetDivideDetailList.indexOf(data);
      Show.value.openDailog(title, data);
    };
    const formUp = reactive({
      targetId: '', //关联的目标指标/外键
      delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
      // targetDivideDetailList: [], //目标指标分解列表
    });

    const add = (val: any) => {
      const item = deepClone(val)
      if(index.value==-1){
        formUp.targetDivideDetailList.push(item);
      }else{
        formUp.targetDivideDetailList[index.value] = item;
      }

      // let obj=JSON.parse(JSON.stringify(form.value))
    };

        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
@@ -126,6 +156,11 @@
            full,
            toggleFullscreen,
            FullScreen,
      daiAdd,
      index,
      Show,
      formUp,
      add,
        };
    },
});

 src/views/goalManagement/safetyAssessment/component/DailogAdd.vue

对比新文件
@@ -0,0 +1,249 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable @close="resetForm(ruleFormRef)">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="责任部门" prop="dutyDepartmentId" size="default">
                        <el-tree-select v-model="form.dutyDepartmentId" check-strictly="true" :data="data" class="w100" :props="propse" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核指标" prop="value" size="default">
                        <el-input v-model.number="form.value" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="制定人部门" prop="makerDepartmentId" size="default">
                        <el-tree-select v-model="form.makerDepartmentId" :data="data" check-strictly="true" class="w100" :props="propse" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="制定日期" prop="makeDate" size="default">
                        <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" value-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="上报值" prop="commitPersonName" size="default">
                        <el-input v-model="form.commitPersonName">
<!--                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>-->
            </el-input>
                    </el-form-item>
                </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="上报时间" prop="makeDate" size="default">
            <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" value-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="考核结果" prop="commitPersonName" size="default">
            <el-input v-model="form.commitPersonName">
              <!--                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>-->
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="考核人" prop="commitPersonName" size="default">
            <el-input v-model="form.commitPersonName">
              <template #append> <el-button :icon="Search" @click="openUser" /> </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="考核时间" prop="commitPersonName" size="default">
            <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2"></el-col>
      </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
				
                <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" @SearchUser="onUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const ruleFormRef = ref<FormInstance>()
        const form = ref({
            dutyDepartmentId: '', ////责任部门/外键
            makerDepartmentId: '', ////制定人部门/外键
            commitPersonId: '', ////上报人/外键
            commitPersonName: '',
            value: '', ////考核指标值
            makeDate: '', ////制定日期
        });
        //部门
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        const disabled = ref(false);
        // 开启弹窗
        const titles = ref();
        const dialogVisible = ref(false);
        const openDailog = (title: string, data: any) => {
            titles.value = `${title}目标考核`;
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
            } else if (title == '修改') {
                disabled.value = false;
                form.value = data;
            } else {
                disabled.value = false;
            }
            dialogVisible.value = true;
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        const rules = reactive<FormRules>({
            dutyDepartmentId: [
                {
                    required: true,
                    message: '责任部门不能为空',
                    trigger: 'blur',
                },
            ],
            makerDepartmentId: [
                {
                    required: true,
                    message: '制定人部门不能为空',
                    trigger: 'blur',
                },
            ],
            commitPersonId: [
                {
                    required: true,
                    message: '上报人不能为空',
                    trigger: 'blur',
                },
            ],
            value: [
                {
                    required: true,
                    message: '考核指标值不能为空',
                    trigger: 'blur',
                },
                {
                    type: 'number',
                    message: '考核指标值只能为数字类型',
                    trigger: 'blur',
                },
            ],
            makeDate: [
                {
                    required: true,
                    message: '制定日期不能为空',
                    trigger: 'blur',
                },
            ],
            commitPersonName: [],
        });
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    emit('onAdd', form.value);
                    dialogVisible.value = false;
                    // handleClose(formEl)
                } else {
                    console.log('error submit!', fields);
                }
            });
        };

        const resetForm = (formEl: FormInstance | undefined) => {
            // console.log(formEl);
            if (!formEl) return
            formEl.resetFields();
            dialogVisible.value = false;
            form.value={}
        };
        // const handleClose = (formEl: any) => {
        //     formEl.resetFields();
        // };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        const data = ref();
        const onUser = (e: any) => {
            console.log(e)
            form.value.commitPersonId = e.uid;
            form.value.commitPersonName = e.realName;
        };
        return {
            disabled,
            titles,
            // handleClose,
            form,
            propse,
            department,
            dialogVisible,
            openDailog,
            Show,
            openUser,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
            data,
            onUser,
            ruleFormRef,
            rules,
            submitForm,
            resetForm,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>