对接

shj

2022-07-27 2b4328392746fc59f5edf98fed629f8db2804e18

对接

 src/api/facilityManagement/index.ts

对比新文件
@@ -0,0 +1,101 @@
import request from '/@/utils/request';
export function facilityManagementApi(){
    return{
        // 设备设施类型管理 查询单条数据
        getequipmentTypeMngDetail:(params:any)=>{
            return request({
                url:`/equipmentTypeMng/selectOne/${params}`,
                method:"get"
            })
        },
        // 设备设施类型管理 新增或者修改数据
        getequipmentTypeMngAddOrUpdate:(params:object)=>{
            return request({
                url:"/equipmentTypeMng/addOrUpdate",
                method:"post",
                data:params
            })
        },
         // 设备设施类型管理 删除 
         getequipmentTypeMngDelete:(params:any)=>{
            return request({
                url:`/equipmentTypeMng/delete?ids=${params}`,
                method:"get"
            })
        },
         // 设备设施类型管理 查询树状数据 
         getequipmentTypeMngTreeData:()=>{
            return request({
                url:`/equipmentTypeMng/treeData`,
                method:"get"
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 查询单条数据
        getequipmentInfoDetail:(params:any)=>{
            return request({
                url:`/equipmentInfo/selectOne/${params}`,
                method:"get"
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 新增或者修改数据
        getequipmentInfoAddOrUpdate:(params:object)=>{
            return request({
                url:"/equipmentInfo/addOrUpdate",
                method:"post",
                data:params
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 删除 
        getequipmentInfoDelete:(params:any)=>{
            return request({
                url:`/equipmentInfo/delete?ids=${params}`,
                method:"get"
            })
        },
        // 仪器仪表信息、生产设备设施、安全设备设施 分页查询数据
        getequipmentInfoList:(params:object)=>{
            return request({
                url:"/equipmentInfo/page/list",
                method:"post",
                data:params
            })
        },
         // 仪器仪表信息、生产设备设施、安全设备设施 统计
         getequipmentInfoStatistics:(params:any)=>{
            return request({
                url:`/equipmentInfo/statistics`,
                method:"get"
            })
        },
        // 重点监管装置/设备 查询单条数据
        getkeypointEquipmentInfoDetail:(params:any)=>{
            return request({
                url:`/keypointEquipmentInfo/selectOne/${params}`,
                method:"get"
            })
        },
        // 重点监管装置/设备 新增或者修改数据
        getkeypointEquipmentInfoAddOrUpdate:(params:object)=>{
            return request({
                url:`/keypointEquipmentInfo/addOrUpdate`,
                method:"post",
                data:params
            })
        },
        // 重点监管装置/设备 删除
        getkeypointEquipmentInfoDetele:(params:any)=>{
            return request({
                url:`/keypointEquipmentInfo/delete?ids=${params}`,
                method:"get"
            })
        },
         // 重点监管装置/设备 分页查询数据
         getkeypointEquipmentInfoAddOrList:(params:object)=>{
            return request({
                url:`/keypointEquipmentInfo/page/list`,
                method:"post",
                data:params
            })
        },
    }
}

 src/api/goalManagement/index.ts

对比新文件
@@ -0,0 +1,254 @@

import request from '/@/utils/request';
export function goalManagementApi() {
    return {
        // 目标设置、目标指标分解列表
        getTargetMngList: (params: object) => {
            return request({
                url: "/targetMng/page/list",
                method: "post",
                data: params
            })
        },
        // 目标设置详情
        getTargetMngDetail: (params: any) => {
            return request({
                url: `/targetMng/selectOne/${params}`,
                method: "get",
            })
        },
        // 目标设置新增或者修改数据
        getTargetMngAddOrupdata: (params: object) => {
            return request({
                url: "/targetMng/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 目标设置删除
        getTargetMngDelete: (params: any) => {
            return request({
                url: `/targetMng/delete?ids=${params}`,
                method: "get",
            })
        },
        // 目标指标分解-新增或者修改数据
        gettargetDivideDetail: (params: object) => {
            return request({
                url: "/targetDivideDetail/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 统计
        getEquipmentInfo: () => {
            return request({
                url: "/equipmentInfo/statistics",
                method: "get"
            })
        },
        // 目标责任书 分页查询数据
        gettargetDutyfileInfoList: (params: object) => {
            return request({
                url: "/targetDutyfileInfo/page/list",
                method: "post",
                data: params
            })
        },
        // 目标责任书 查询单条数据
        gettargetDutyfileInfoDetail: (params: any) => {
            return request({
                url: `/targetDutyfileInfo/selectOne/${params}`,
                method: "get"
            })
        },
        // 目标责任书 新增或者修改数据 
        gettargetDutyfileInfoAddorUpdata: (params: object) => {
            return request({
                url: `/targetDutyfileInfo/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        // 目标责任书 删除
        gettargetDutyfileInfoDelete: (params: any) => {
            return request({
                url: `/targetDutyfileInfo/delete?ids=${params}`,
                method: "get",
            })
        },
        // 奖惩标准设定 分页查询数据
        getrewardPunishmentStandardList: (params: object) => {
            return request({
                url: "/rewardPunishmentStandard/page/list",
                method: "post",
                data: params
            })
        },
        // 奖惩标准设定 查询单条数据 
        getrewardPunishmentStandardDetail: (params: any) => {
            return request({
                url: `/rewardPunishmentStandard/selectOne/${params}`,
                method: "get",
            })
        },
        // 奖惩标准设定 新增或者修改数据
        getrewardPunishmentStandardaddOrUpdate: (params: object) => {
            return request({
                url: "/rewardPunishmentStandard/addOrUpdate",
                method: "post",
                data: params
            })
        },
        // 奖惩标准设定 删除 
        getrewardPunishmentStandardDelete: (params: any) => {
            return request({
                url: `/rewardPunishmentStandard/delete?ids=${params}`,
                method: "get",
            })
        },
        // 奖惩记录 分页查询数据
        getrewardPunishmentList: (params: object) => {
            return request({
                url: "/rewardPunishmentDetail/page/list",
                method: "post",
                data: params
            })
        },
        // 奖惩记录 查询单条数据 
        getrewardPunishmentDetail: (params: any) => {
            return request({
                url: `/rewardPunishmentDetail/selectOne/${params}`,
                method: "get",
            })
        },
        // 奖惩记录 新增或者修改数据
        getrewardPunishmentAddOrUpdate: (params: object) => {
            return request({
                url: `/rewardPunishmentDetail/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        // 奖惩记录 删除 
        getrewardPunishmentDelete: (params: any) => {
            return request({
                url: `/rewardPunishmentDetail/delete?ids=${params}`,
                method: "get",
            })
        },
        // 绩效考核管理 安全考核管理 分页查询数据
        getexamineMngList: (params: object) => {
            return request({
                url: "/examineMng/page/list",
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 安全考核管理 查询单条数据 
        getexamineMngDetail: (params: any) => {
            return request({
                url: `/examineMng/selectOne/${params}`,
                method: "get",
            })
        },
        //  绩效考核管理 安全考核管理 新增或者修改数据
        getexamineMngAddOrUpdate: (params: object) => {
            return request({
                url: `/examineMng/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 安全考核管理 删除 
        getexamineMngDelete: (params: any) => {
            return request({
                url: `/examineMng/delete?ids=${params}`,
                method: "get",
            })
        },
        // 绩效考核管理 考核标准设定 分页查询数据
        getexamineTemplateList: (params: object) => {
            return request({
                url: "/examineTemplate/page/list",
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 考核标准设定 查询单条数据 
        getexamineTemplateDetail: (params: any) => {
            return request({
                url: `/examineTemplate/selectOne/${params}`,
                method: "get",
            })
        },
        //  绩效考核管理 考核标准设定 新增或者修改数据
        getexamineTemplateAddOrUpdate: (params: object) => {
            return request({
                url: `/examineTemplate/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  绩效考核管理 考核标准设定 删除 
        getexamineTemplateDelete: (params: any) => {
            return request({
                url: `/examineTemplate/delete?ids=${params}`,
                method: "get",
            })
        },
        // 目标汇总 分页查询数据
        gettargetDutySummaryList: (params: object) => {
            return request({
                url: "/targetDutySummary/page/list",
                method: "post",
                data: params
            })
        },
        //  目标汇总 查询单条数据 
        gettargetDutySummaryDetail: (params: any) => {
            return request({
                url: `/targetDutySummary/selectOne/${params}`,
                method: "get",
            })
        },
        //  目标汇总 新增或者修改数据
        gettargetDutySummaryAddOrUpdate: (params: object) => {
            return request({
                url: `/targetDutySummary/addOrUpdate`,
                method: "post",
                data: params
            })
        },
        //  目标汇总 删除 
        gettargetDutySummaryDelete: (params: any) => {
            return request({
                url: `/targetDutySummary/delete?ids=${params}`,
                method: "get",
            })
        },
        // 安全目标考核 查询单条数据
        gettargetExamineDetail: (params: any) => {
            return request({
                url: `/targetExamine/selectOne/${params}`,
                method: "get"
            })
        },
        // 安全目标考核 新增或者修改数据
        gettargetExamineAddOrUpdate: (params: object) => {
            return request({
                url: "/targetExamine/addOrUpdate",
                method: "post",
                data: params
            })
        },
        //   目标检查上报 (有疑问) 新增或者修改数据 ---???
        getworkApproveAddOrUpdate: (params: object) => {
            return request({
                url: "/workApprove/submitApprove",
                method: "post",
                data: params
            })
        },
    }
}

 src/components/DailogSearch/DailogSearch.vue

@@ -7,51 +7,49 @@
                    <el-row>
                        <el-col :span="6">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="安全目标指标" />
                                <el-input v-model="ruleForm.searchParams.qName" placeholder="安全目标指标" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                                <el-input v-model="ruleForm.searchParams.indexNum" placeholder="目标指标编号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                                <el-button type="primary" @click="listApi">查询</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1" @change="radio">
                                <el-radio :label="scope.row.date" size="large">{{null}}</el-radio>
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="安全目标指标" width="180" />
                    <el-table-column align="center" prop="name" label="目标指标编号" width="180" />
                    <el-table-column align="center" prop="address" label="年度" />
                    <el-table-column align="center" prop="address" label="指标值" />
                    <el-table-column align="center" prop="qName" label="安全目标指标" width="180" />
                    <el-table-column align="center" prop="indexNum" label="目标指标编号" width="180" />
                    <el-table-column align="center" prop="year" label="年度" />
                    <el-table-column align="center" prop="value" label="指标值" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="7">
                <div v-if="dynamicTags[0]==''?false:true">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
@@ -61,87 +59,115 @@
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag }}
                    {{ tag.qName }}
                </el-tag>
                </div>
            </el-col>
        </el-row>
        <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>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Delete,FullScreen } from '@element-plus/icons-vue';
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { Delete, FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup() {
    setup(props,{emit}) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
        const openDailog = (type:any) => {
            dialogVisible.value = true;
            ruleForm.searchParams.targetType=type
            listApi();
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const pageSize4 = ref(100);
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
        });

        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['2016-05-03']);
        const dynamicTags = ref(['']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value=""
            radio1.value = '';
        };
        const radio1=ref('2016-05-03')
        const radio=(event:any)=>{
            dynamicTags.value[0]=event
        const radio1 = ref('');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        const clear=()=>{
            dynamicTags.value=['']
            radio1.value=""
        }
            //全屏
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            }else{
        full.value = false;
      }
            } else {
                full.value = false;
            }
        };
        const submitForm=()=>{
            let obj=JSON.parse(JSON.stringify(dynamicTags.value))
            emit("backNum",obj[0])
            dialogVisible.value = false
        }
        return {
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            resetForm,
            listApi,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
@@ -151,7 +177,9 @@
            full,
            toggleFullscreen,
            Delete,
            FullScreen
            FullScreen,
            clear,
            submitForm
        };
    },
});

 src/components/DailogSearchUser/index.vue

@@ -10,7 +10,7 @@
                    </div>
                </div>
            </el-col>
            <el-col :span="14" style="padding:20px">
            <el-col :span="14" style="padding: 20px">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="10" :offset="1">
@@ -26,12 +26,19 @@
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center" width="50px" type="selection"></el-table-column>
                    <el-table-column align="center" prop="date" label="安全目标指标" />
                    <el-table-column align="center" prop="name" label="目标指标编号" />
                    <el-table-column align="center" prop="address" label="年度" />
                    <el-table-column align="center" prop="address" label="指标值" />
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" label="登录名" />
                    <el-table-column align="center" prop="name" label="用户名" />
                    <el-table-column align="center" prop="address" label="所属机构" />
                    <el-table-column align="center" prop="address" label="所属部门" />
                    <el-table-column align="center" prop="address" label="状态" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
@@ -48,15 +55,23 @@
                />
            </el-col>
            <el-col :span="4">
                <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{ tag }}
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.name }}
                </el-tag>
            </el-col>
        </el-row>
        <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>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
@@ -69,7 +84,7 @@
    children?: Tree[];
}
export default defineComponent({
    setup() {
    setup(props,{emit}) {
        //左边树形部分
        const names = ref<any>();
        const handleNodeClick = (data: Tree) => {
@@ -141,22 +156,23 @@
        });
        // 表格
        const tableData = [
            {
            {   id:1,
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
            {	
                id:2,
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
            {    id:3,
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
            {    id:4,
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
@@ -169,26 +185,35 @@
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        const radio1 = ref('1');
        // 右方点击添加后显示标签
        const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        // 开启弹窗
        const dialogVisible = ref(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
            //全屏
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            }else{
        full.value = false;
      }
            } else {
                full.value = false;
            }
        };
        const submitForm=()=>{
            let obj=JSON.parse(JSON.stringify(dynamicTags.value))
            emit("SearchUser",obj[0])
            dialogVisible.value = false
        }
        return {
            dialogVisible,
            names,
@@ -202,10 +227,12 @@
            handleCurrentChange,
            radio1,
            dynamicTags,
            handleClose,
            handleClose,
            FullScreen,
            full,
            toggleFullscreen
            toggleFullscreen,
            radio,
            submitForm
        };
    },
});

 src/views/facilityManagement/deviceType/component/Dailog.vue

@@ -1,13 +1,13 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="新建设备设施类型管理" width="50%" draggable>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="是否为设备内容" size="default">
                        <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                            <el-option label="1">是</el-option>
                            <el-option label="2">否</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
@@ -47,9 +47,15 @@
export default defineComponent({
    setup() {
        const dialogVisible = ref(false);
        const form = ref({});
        const openDailog = () => {
        const form = ref({
			
        });
        const titles=ref()
        const openDailog = (title:string,id:number) => {
            dialogVisible.value = true;
            titles.value=`${title}设备设施类型管理`

			
        };
        //全屏
        const full = ref(false);
@@ -63,6 +69,7 @@
        return {
            dialogVisible,
            form,
            titles,
            openDailog,
            full,
            toggleFullscreen,

 src/views/facilityManagement/deviceType/index.vue

@@ -1,96 +1,132 @@
<template>
    <div class="box">
        <el-button type="primary" :icon="Plus" @click="openD" size="default">新建</el-button>
         <el-table :data="tableData" style="width: 100%"  row-key="id">
    <el-table-column align="center" prop="date" label="是否为设备内容"/>
    <el-table-column align="center" prop="name" label="巡检" />
    <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 type="primary" link :icon="View">查看</el-button>
         <el-button type="primary" link :icon="EditPen">修改</el-button>
         <el-button type="primary" link :icon="Delete">删除</el-button>
         <el-button type="primary" link :icon="CirclePlus">添加下级设备设施类型管理</el-button>
        </template>
    </el-table-column>
  </el-table>
   <Dailog ref="Show"></Dailog>
    </div>
    <div class="box">
        <el-button type="primary" :icon="Plus" @click="openD('新建')" size="default">新建</el-button>
        <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all>
            <el-table-column align="center" label="是否为设备内容">
                <template #default="scope">
                    <span v-if="scope.row.isContent == 1">是</span>
                    <span v-if="scope.row.isContent == 2">否</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="巡检">
                <template #default="scope">
                    <span v-if="scope.row.isVisit == 1">是</span>
                    <span v-if="scope.row.isVisit == 2">否</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="检测">
                <template #default="scope">
                    <span v-if="scope.row.isCheck == 1">是</span>
                    <span v-if="scope.row.isCheck == 2">否</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="类别名称" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button type="primary" link :icon="View" @click="openD('查看')">查看</el-button>
                    <el-button type="primary" link :icon="EditPen" @click="openD('修改')">修改</el-button>
                    <el-button type="primary" link :icon="Delete">删除</el-button>
                    <el-button type="primary" link :icon="CirclePlus" @click="openD('添加')">添加下级设备设施类型管理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Dailog ref="Show"></Dailog>
    </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
import {Plus,View,EditPen,Delete,CirclePlus} from '@element-plus/icons-vue'
import Dailog from "./component/Dailog.vue"
import { defineComponent, onMounted, ref } from 'vue';
import { Plus, View, EditPen, Delete, CirclePlus } from '@element-plus/icons-vue';
import Dailog from './component/Dailog.vue';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { ElMessage } from 'element-plus';
export default defineComponent({
    components:{Dailog},
    setup() {
      const tableData = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
         children: [
      {
        id: 35,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
      {
        id: 36,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
    ],
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
  },
]
    const Show=ref()
    const openD=()=>{
        Show.value.openDailog()
    }
       return{
           tableData,
           Show,
           openD,
           Plus,
           View,
           EditPen,
           Delete,
           CirclePlus
       } 
    },
})
    components: { Dailog },
    setup() {
        const listApi = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: 'Oops, this is a error message.',
                            type: 'error',
                        });
                    }
                });
        };
        onMounted(() => {
            listApi();
        });
        const tableData = ref([
            {
                id: 1,
                date: '2016-05-02',
                name: 'wangxiaohu',
            },
            {
                id: 2,
                date: '2016-05-04',
                name: 'wangxiaohu',
            },
            {
                id: 3,
                date: '2016-05-01',
                name: 'wangxiaohu',
                children: [
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: 'wangxiaohu',
                        children: [
                            {
                                id: 35,
                                date: '2016-05-01',
                                name: 'wangxiaohu',
                            },
                            {
                                id: 36,
                                date: '2016-05-01',
                                name: 'wangxiaohu',
                            },
                        ],
                    },
                    {
                        id: 32,
                        date: '2016-05-01',
                        name: 'wangxiaohu',
                    },
                ],
            },
            {
                id: 4,
                date: '2016-05-03',
                name: 'wangxiaohu',
            },
        ]);
        const Show = ref();
        const openD = (title: string, id: number) => {
            Show.value.openDailog(title, id);
        };
        return {
            tableData,
            Show,
            openD,
            listApi,
            Plus,
            View,
            EditPen,
            Delete,
            CirclePlus,
        };
    },
});
</script>
<style scoped>
.box{
    padding: 20px;
    background-color: #fff;
.box {
    padding: 20px;
    background-color: #fff;
}
</style>

 src/views/goalManagement/Goalsummary/index.vue

@@ -1,166 +1,178 @@
<template>
  <div>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item size="default">
                    <el-input v-model="ruleForm.pass" placeholder="年度" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-select v-model="ruleForm.region" placeholder="请选择责任部门" size="default">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
        <div class="btns">
            <p>汇总日期:2022-07-04 23:00:07</p>
            <div>
                <el-button type="primary" size="default" :icon="Download">导出</el-button>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item size="default">
                        <el-input v-model="ruleForm.searchParams.year" placeholder="年度" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-tree-select v-model="form.searchParams.departmentId" :data="data" class="w100" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-button size="default" type="primary" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <div class="btns">
                <p>汇总日期:2022-07-04 23:00:07</p>
                <div>
                    <el-button type="primary" size="default" :icon="Download">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="责任部门" align="center">
                    <template #default="scope">{{ scope.row.departmentId }}</template>
                </el-table-column>
                <el-table-column property="targetValue" align="center" label="安全目标指标" />
                <el-table-column property="examineValue" label="考核指标" align="center" show-overflow-tooltip />
                <el-table-column property="yiYue" label="1月" align="center" show-overflow-tooltip />
                <el-table-column property="february" label="2月" align="center" show-overflow-tooltip />
                <el-table-column property="erYue" label="3月" align="center" show-overflow-tooltip />
                <el-table-column property="sanYue" label="4月" align="center" show-overflow-tooltip />
                <el-table-column property="siYue" label="5月" align="center" show-overflow-tooltip />
                <el-table-column property="wuYue" label="6月" align="center" show-overflow-tooltip />
                <el-table-column property="liuYue" label="7月" align="center" show-overflow-tooltip />
                <el-table-column property="qiYue" label="8月" align="center" show-overflow-tooltip />
                <el-table-column property="baYue" label="9月" align="center" show-overflow-tooltip />
                <el-table-column property="jiuYue" label="10月" align="center" show-overflow-tooltip />
                <el-table-column property="shiYue" label="11月" align="center" show-overflow-tooltip />
                <el-table-column property="shiyiYue" label="12月" align="center" show-overflow-tooltip />
                <el-table-column label="考核结果" align="center">
                    <template #default="scope">{{ scope.row.examineResult }}</template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="责任部门" align="center" >
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="安全目标指标" />
            <el-table-column property="address" label="考核指标" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="1月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="2月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="3月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="4月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="5月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="6月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="7月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="8月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="9月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="10月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="11月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="12月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="考核结果" align="center"  show-overflow-tooltip />
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
    </div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                year: '', //年度
                departmentId: '', //责任部门
            },
        });
        const resetForm = (formEl: FormInstance | undefined) => {
            console.log(!formEl);
            if (!formEl) return;
            formEl.resetFields();
        };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.year = '';
            ruleForm.searchParams.departmentId = '';
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        const listApi = () => {
            goalManagementApi()
                .gettargetDutySummaryList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
            listApi();
        });

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        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: [],
                    },
                ],
            },
        ];
        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            total,
            data,
            resetForm,
            listApi,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Plus,
            Delete,
            Upload,
@@ -188,10 +200,10 @@
    display: flex;
    justify-content: left;
}
.btns p{
    font-size: 18px;
    line-height: 40px;
    margin-right: 20px;
.btns p {
    font-size: 18px;
    line-height: 40px;
    margin-right: 20px;
}
.pages {
    padding: 20px 0;

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

@@ -5,26 +5,26 @@
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标" size="default">
                        <el-input v-model="form.name">
                        <el-input v-model="form.qName" :disabled="disabled">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号" size="default">
                        <el-input v-model="form.name" />
                        <el-input v-model="form.indexNum" disabled />
                    </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-input v-model="form.year" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值" size="default">
                        <el-input v-model="form.name" />
                        <el-input v-model="form.value" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
@@ -56,58 +56,50 @@
            </span>
        </template>
    </el-dialog>
    <DailogSearch ref="Shows"></DailogSearch>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
</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 { goalManagementApi } from '/@/api/goalManagement';
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) => {
        const form = ref({});
        const targetType = ref();
        const disabled = ref(false);
        const titles = ref();
        const openDailog = (title: string, type: any, id: number) => {
            dialogVisible.value = true;
            titles.value = title;
            targetType.value = type;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改') {
                goalManagementApi()
                    .getTargetMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
        };
        const onNumber = (e: object) => {
            form.value = e;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const tableData = ref([]);
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
            Shows.value.openDailog(targetType.value);
        };
        //全屏
        const full = ref(false);
@@ -122,6 +114,10 @@
            form,
            dialogVisible,
            openDailog,
            targetType,
            onNumber,
            disabled,
            titles,
            activeName,
            tableData,
            Shows,

 src/views/goalManagement/safetyAssessment/index.vue

@@ -1,26 +1,26 @@
<template>
     <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item size="default">
                    <el-input v-model="ruleForm.pass" placeholder="请输入目标指标" />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item size="default">
                        <el-input v-model="ruleForm.searchParams.indexNum" placeholder="请输入目标指标" />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                </el-form-item>
            </el-col> -->
            <el-col :span="4">
                <el-form-item>
                    <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
                <el-col :span="4">
                    <el-form-item>
                        <el-button size="default" type="primary" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <div class="btns">
                <div>
                    <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
@@ -29,37 +29,33 @@
                    <!-- <el-button size="default" :icon="Refresh"></el-button> -->
                </div>
            </div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column label="安全目标指标" align="center" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="考核指标编号" sortable />
            <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip />
            <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="View" @click="handleClick">查看</el-button>
                    <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="考核指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
                <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button>
                        <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            <Dailog ref="openAdd"></Dailog>
        </div>
        <Dailog ref="openAdd"></Dailog>
    </div>
    </div>
</template>
<script lang="ts">
@@ -67,104 +63,118 @@
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import { goalManagementApi } from '/@/api/goalManagement';
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
export default defineComponent({
    components: { ElButton, ElInput, Dailog },
    setup() {
            // 搜索条件
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        const resetForm = (formEl: FormInstance | undefined) => {
      console.log(!formEl);
      if (!formEl) return;
      formEl.resetFields();
    };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        //
        const handleClick = (val: any) => {
            let targetType = JSON.parse(JSON.stringify(val));
            ruleForm.searchParams.targetType = targetType.paneName;
            listApi();
        };
        onMounted(() => {
            listApi();
        });
        const onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
            // 删除
        const onDelete = (id: number) => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        // 弹窗
        const openAdd = ref();
        const openD = (type: String, value: any) => {
            openAdd.value.openDailog(type, value);
        const openD = (title: String, id: number) => {
            openAdd.value.openDailog(title, ruleForm.searchParams.targetType, id);
        };

        return {
            ruleForm,
            resetForm,
            activeName,
            listApi,
            ruleForm,
            resetForm,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            onAddorUpdata,
            total,
            openAdd,
            openD,
            small,
            disabled,
            background,
            onDelete,
            Plus,
            Delete,
            Upload,
@@ -177,9 +187,9 @@
</script>
<style scoped>
.topTitle {
  background-color: #fff;
  padding: 20px 0px 20px 0px;
  margin-bottom:10px ;
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;

 src/views/goalManagement/targetDecompositionMonth/index.vue

@@ -1,213 +1,276 @@
<template>
    <div>
        <search></search>
        <div class="minCenter">
            <div class="btns">
              <div>
                <el-button size="default" type="primary" :icon="Plus" @click="openType">新建</el-button>
                <el-button size="default" type="warning" :icon="EditPen" plain >修改</el-button>
                <el-button size="default" type="danger" :icon="Delete" plain>删除</el-button>
              </div>
            </div>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="70"
            />
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="安全目标指标" align="center" sortable>
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              property="name"
              align="center"
              label="目标指标编号"
              sortable
            />
            <el-table-column
              property="address"
              label="年度"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标值"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              sortable
              show-overflow-tooltip
            >
              <template #default>
                <el-button link type="primary" size="small" :icon="View" @click="handleClick"
                  >查看</el-button
                >
                <el-button link type="primary" size="small" :icon="EditPen" @click="handleClick"
                  >修改</el-button
                >
                <el-button link type="primary" size="small" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <Dailog ref="Show"></Dailog>
        </div>
    <div>
        <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item>
                        <el-button type="primary" size="default" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <div class="btns">
                <div>
                    <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                    <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain>修改</el-button>
                    <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column type="expand">
                    <template #default>
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonId" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="目标指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
                <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button>
                        <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show"></Dailog>
    </div>
</template>
<script lang="ts">
import search from '../targetSettings/component/search.vue'
import Dailog from '../targetDecompositionYear/component/Dailog.vue'
import { ref, toRefs, reactive, onMounted, defineComponent } from "vue";
import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElInput,
  TabsPaneContext,
  FormInstance,
} from "element-plus";
import {
  Plus,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  EditPen
} from "@element-plus/icons-vue";
interface User {
  date: string;
  name: string;
  address: string;
}
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import search from '../targetSettings/component/search.vue';
import Dailog from '../targetDecompositionYear/component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
export default defineComponent({
  components: { ElButton, ElInput,search,Dailog},
  setup() {
    components: { ElButton, ElInput, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '2', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
            listApi();
        });


    // 下方导航与表格
    const activeName = ref("1");
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event);
    };
    const formatter = (row: User, column: TableColumnCtx<User>) => {
      return row.address;
    };

    const tableData: User[] = [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    const currentPage4 = ref(4);
    const pageSize4 = ref(100);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    // 打开弹窗
   const Show=ref()
   const openType=()=>{
   Show.value.openDailog()
   }
    return {
      activeName,
      handleClick,
      tableData,
      formatter,
      currentPage4,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      Show,
      openType,
      Plus,
      Delete,
      Upload,
      Download,
      Refresh,
      View,
      EditPen
    };
  },
        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        const activeNames = ref('1');
        // 打开弹窗
        const Show = ref();
        const openD = (title: String, id: number) => {
            Show.value.openDailog(title, ruleForm.searchParams.targetType, id);
        };
        // 删除
        const onDelete = (id: number) => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    // ElMessage({
                    //     type: 'info',
                    //     message: 'Delete canceled',
                    // });
                });
        };
        // 批量删除
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr.toString();
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        return {
            listApi,
            resetForm,
            tableData,
            currentPage4,
            pageSize4,
            total,
            ruleForm,
            handleSizeChange,
            handleCurrentChange,
            Show,
            openD,
            activeNames,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen,
        };
    },
});
</script>
<style scoped>
.minCenter {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 0 20px;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
  padding: 0px 0px 10px 0px;
  display: flex;
  justify-content: space-between;
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages{
padding:20px 0;
display: flex;
justify-content: right;
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
}
</style>

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

@@ -1,117 +1,135 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="目标分解" width="50%" draggable>
    <el-dialog v-model="dialogVisible" :before-close="resetForm" :fullscreen="full" title="目标分解" width="60%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标" size="default">
                        <el-input v-model="form.name">
                        <el-input v-model="form.qName" :disabled="disabled">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号" size="default">
                        <el-input v-model="form.name" />
                        <el-input v-model="form.indexNum" disabled />
                    </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-input v-model="form.year" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值" size="default">
                        <el-input v-model="form.name" />
                        <el-input v-model="form.value" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标分解" name="1">
                <el-button type="primary" size="default" @click="daiAdd">新增</el-button>
                <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" prop="date" label="责任部门" width="180" />
            <el-table-column align="center" prop="name" label="考核指标" width="180" />
            <el-table-column align="center" prop="address" label="制定人部门" />
            <el-table-column align="center" prop="address" label="制定日期" />
            <el-table-column align="center" prop="address" label="上报人" />
            <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" width="180" />
            <el-table-column align="center" prop="value" label="考核指标" width="180" />
            <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" />
            <el-table-column align="center" prop="makeDate" label="制定日期" />
            <el-table-column align="center" prop="commitPersonId" label="上报人" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary">查看</el-button>
                    <el-button link :disabled="disabled" type="primary">修改</el-button>
                    <el-button link :disabled="disabled" type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <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>
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" v-if="disabled == false" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogAdd ref="Show"></DailogAdd>
    <DailogSearch ref="Shows"></DailogSearch>
    <DailogAdd ref="Show" @onAdd="add"></DailogAdd>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogAdd from './DailogAdd.vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { DailogAdd, 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) => {
        const form = ref({});
        const targetType = ref();
        const disabled = ref(false);
        const titles = ref();
        const openDailog = (title: string, type: any, id: number) => {
            dialogVisible.value = true;
            titles.value = title;
            targetType.value = type;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改') {
                goalManagementApi()
                    .getTargetMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
        };
        const onNumber = (e: object) => {
            form.value = e;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const tableData = ref([]);
        // 新增弹窗
        const Show = ref();
        const daiAdd = () => {
            Show.value.openDailog();
        };
        const formUp = reactive({
            targetId:"", //关联的目标指标/外键
            delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
            targetDivideDetailList: [], //目标指标分解列表
        });
        const add = (e:any) => {
            formUp.targetDivideDetailList.push(e)
            // let obj=JSON.parse(JSON.stringify(form.value))
            formUp.targetId=form.value.id
            goalManagementApi().gettargetDivideDetail(formUp).then(res=>{
                if(res.data.code==200){
					
                }
            })
        };
        const submitForm=()=>{

        }
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
            Shows.value.openDailog(targetType.value);
        };
        // 关闭
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {};
            tableData.value = [];
        };
        //全屏
        const full = ref(false);
@@ -136,6 +154,14 @@
            full,
            toggleFullscreen,
            FullScreen,
            onNumber,
            targetType,
            disabled,
            resetForm,
            titles,
            add,
            formUp,
            submitForm
        };
    },
});

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

@@ -1,41 +1,35 @@
<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>
@@ -46,30 +40,84 @@
        <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 = () => {
@@ -89,6 +137,54 @@
                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,
@@ -99,6 +195,12 @@
            full,
            toggleFullscreen,
            FullScreen,
            data,
            onUser,
            ruleFormRef,
            rules,
            submitForm,
            resetForm
        };
    },
});

 src/views/goalManagement/targetDecompositionYear/index.vue

@@ -1,212 +1,274 @@
<template>
    <div>
        <search></search>
        <div class="minCenter">
            <div class="btns">
              <div>
                <el-button size="default" type="primary" :icon="Plus" @click="openType">新建</el-button>
                <el-button size="default" type="warning" :icon="EditPen" plain >修改</el-button>
                <el-button size="default" type="danger" :icon="Delete" plain>删除</el-button>
              </div>
            </div>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="70"
            />
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="安全目标指标" align="center" sortable>
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              property="name"
              align="center"
              label="目标指标编号"
              sortable
            />
            <el-table-column
              property="address"
              label="年度"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标值"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              sortable
              show-overflow-tooltip
            >
              <template #default>
                <el-button link type="primary" size="small" :icon="View" @click="handleClick"
                  >查看</el-button
                >
                <el-button link type="primary" size="small" :icon="EditPen" @click="handleClick"
                  >修改</el-button
                >
                <el-button link type="primary" size="small" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <Dailog ref="Show"></Dailog>
        </div>
    <div>
        <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item>
                        <el-button type="primary" size="default" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <div class="btns">
                <div>
                    <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                    <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain>修改</el-button>
                    <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column type="expand">
                    <template #default>
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentId" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentId" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonId" label="上报人" />
                                    </el-table>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="目标指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
                <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button>
                        <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show"></Dailog>
    </div>
</template>
<script lang="ts">
import search from '../targetSettings/component/search.vue'
import Dailog from './component/Dailog.vue'
import { ref, toRefs, reactive, onMounted, defineComponent } from "vue";
import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElInput,
  TabsPaneContext,
  FormInstance,
} from "element-plus";
import {
  Plus,
  Delete,
  Upload,
  Download,
  Refresh,
  View,
  EditPen
} from "@element-plus/icons-vue";
interface User {
  date: string;
  name: string;
  address: string;
}
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import Dailog from './component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
  components: { ElButton, ElInput,search,Dailog},
  setup() {
    components: { ElButton, ElInput, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
            listApi();
        });


    // 下方导航与表格
    const activeName = ref("1");
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event);
    };
    const formatter = (row: User, column: TableColumnCtx<User>) => {
      return row.address;
    };

    const tableData: User[] = [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    const currentPage4 = ref(4);
    const pageSize4 = ref(100);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    // 打开弹窗
   const Show=ref()
   const openType=()=>{
   Show.value.openDailog()
   }
    return {
      activeName,
      handleClick,
      tableData,
      formatter,
      currentPage4,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      Show,
      openType,
      Plus,
      Delete,
      Upload,
      Download,
      Refresh,
      View,
      EditPen
    };
  },
        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        const activeNames = ref('1');
        // 打开弹窗
        const Show = ref();
        const openD = (title: String, id: number) => {
            Show.value.openDailog(title,ruleForm.searchParams.targetType, id);
        };
        // 删除
        const onDelete = (id: number) => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    // ElMessage({
                    //     type: 'info',
                    //     message: 'Delete canceled',
                    // });
                });
        };
        // 批量删除
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr.toString();
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        return {
            listApi,
            resetForm,
            tableData,
            currentPage4,
            pageSize4,
            total,
            ruleForm,
            handleSizeChange,
            handleCurrentChange,
            Show,
            openD,
            activeNames,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
}
.minCenter {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 0 20px;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
  padding: 0px 0px 10px 0px;
  display: flex;
  justify-content: space-between;
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages{
padding:20px 0;
display: flex;
justify-content: right;
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

 src/views/goalManagement/targetEscalation/index.vue

@@ -1,156 +1,166 @@
<template>
  <div>
    <search></search>
    <div class="minCenter">
        <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="2"></el-tab-pane>
            <el-tab-pane label="审核" name="3"></el-tab-pane>
        </el-tabs>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="安全目标指标" align="center" sortable>
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="目标指标编号" sortable />
            <el-table-column property="address" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="address" label="指标值" align="center" sortable show-overflow-tooltip />
            <el-table-column v-if="activeName == 1" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(0)">检查</el-button>
                    <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="activeName == 2" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(1)">上报</el-button>
                </template>
            </el-table-column>
            <el-table-column v-if="activeName == 3" label="操作" align="center"  show-overflow-tooltip>
                <template #default>
                    <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom()">待审批</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
    <div>
        <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item>
                        <el-button type="primary" size="default" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <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="2"></el-tab-pane>
                <el-tab-pane label="审核" name="3"></el-tab-pane>
            </el-tabs>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="目标指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
                <el-table-column v-if="activeName == 1" label="操作" align="center" show-overflow-tooltip>
                    <template #default>
                        <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(0)">检查</el-button>
                        <el-button link type="primary" size="default" :icon="View" @click="openDai(tableData)">记录</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName == 2" label="操作" align="center" show-overflow-tooltip>
                    <template #default>
                        <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom(1)">上报</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName == 3" label="操作" align="center" show-overflow-tooltip>
                    <template #default>
                        <el-button link type="primary" size="default" :icon="EditPen" @click="jumpFrom()">待审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
    <Dailog ref="Show"></Dailog>
        <Dailog ref="Show"></Dailog>
    </div>
</template>
<script lang="ts">
import search from '../targetSettings/component/search.vue';
import Dailog from './component/Dailog.vue'
import Dailog from './component/Dailog.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View,EditPen} from '@element-plus/icons-vue';
import {useRouter} from "vue-router"
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput, search,Dailog },
    components: { ElButton, ElInput, Dailog },
    setup() {
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        //
        const handleClick = (val: any) => {
            let targetType = JSON.parse(JSON.stringify(val));
            ruleForm.searchParams.targetType = targetType.paneName;
            listApi();
        };
        onMounted(() => {
            listApi();
        });
        const onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        // 记录弹窗
        const Show=ref()
        const openDai=(data:any)=>{
            Show.value.openDailog(data)
        }
        const activeName = ref('1');
        // 记录弹窗
        const Show = ref();
        const openDai = (data: any) => {
            Show.value.openDailog(data);
        };
        // 流程表单
        const router=useRouter()
        const jumpFrom=(data:string)=>{
        const router = useRouter();
        const jumpFrom = (data: string) => {
            router.push({
                path:"/processForms",
                query:{
                    type:data
                }
            })
        }
                path: '/processForms',
                query: {
                    type: data,
                },
            });
        };
        return {
            activeName,
            total,
            handleClick,
            ruleForm,
            listApi,
            onAddorUpdata,
            tableData,
            formatter,
            resetForm,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Show,
            openDai,
            Show,
            openDai,
            router,
            jumpFrom,
            Plus,
@@ -159,12 +169,16 @@
            Download,
            Refresh,
            View,
            EditPen
            EditPen,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
}
.minCenter {
    width: 100%;
    background-color: #fff;

 src/views/goalManagement/targetSettings/component/dailogAdd.vue

@@ -1,54 +1,55 @@
<template>
    <el-dialog v-model="Shows" :fullscreen="full" title="新建目标设定" width="50%" draggable>
    <el-dialog v-model="Shows" :before-close="resetForm" :fullscreen="full" :title="titles" 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" :disabled="disabled" ref="ruleFormRef" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标" size="default">
                        <el-input  v-model="form.name" />
                    <el-form-item label="安全目标指标" prop="qName" size="default">
                        <el-input v-model="form.qName" 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="indexNum" size="default">
                        <el-input v-model="form.indexNum" placeholder="请填写目标指标编号" />
                    </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="year" size="default">
                        <el-input v-model.number="form.year" 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" placeholder="请填写指标值" />
                    </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" placeholder="please select your zone" style="width: 100%">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        <el-select v-model="form.level" placeholder="请选择" style="width: 100%">
                            <el-option label="公司级" value="1">公司级</el-option>
                            <el-option label="部门分厂级" value="2">部门分厂级</el-option>
                            <el-option label="工段班组级" value="3">工段班组级</el-option>
                        </el-select>
                    </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" placeholder="Pick a date" style="width:100%" />
                        <el-date-picker v-model="form.completeDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注信息">
                <el-input v-model="form.desc" size="default" type="textarea" />
                <el-input v-model="form.memo" size="default" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="Shows = false" size="default">关闭</el-button>
                <el-button type="primary" @click="Shows = false" size="default">确定</el-button>
                <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                <el-button type="primary" v-if="titles == '查看目标设定' ? false : true" @click="submitForm(ruleFormRef)" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
@@ -56,25 +57,43 @@
<script lang="ts">
import { ref, toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
import screenfull from 'screenfull';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { FullScreen } from '@element-plus/icons-vue';

import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, Search, FullScreen } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup(props) {
    setup(props, { emit }) {
        let Shows = ref(false);
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        const ruleFormRef = ref<FormInstance>();
        const form = ref({
            indexNum: '', //目标指标编号
            qName: '', //安全目标指标
            year: '', //年度
            level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级
            memo: '', ////备注信息
            targetType: '', ////指标类型 1:年指标 2:月指标
            completeDate: '', ////完成期限
            divideStatus: '1', ////分解状态 1:已分解 2:未分解
            value: '', ////指标值
        });
        const titles = ref();
        const disabled = ref(false);
        // 打开弹窗
        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
        const openDialog = (title: string, value: any, id: number) => {
            Shows.value = true;
            titles.value = `${title}目标设定`;
            form.value.targetType = value;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                goalManagementApi()
                    .getTargetMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        //全屏
        const full = ref(false);
@@ -85,12 +104,99 @@
                full.value = false;
            }
        };
        const rules = reactive<FormRules>({
            qName: [
                {
                    required: true,
                    message: '安全目标指标不能为空',
                    trigger: 'change',
                },
            ],
            indexNum: [
                {
                    required: true,
                    message: '目标指标编号不能为空',
                    trigger: 'change',
                },
            ],
            year: [
                {
                    required: true,
                    message: '年度不能为空',
                    trigger: 'change',
                },
            ],
            value: [
                {
                    required: true,
                    message: '指标值不能为空',
                    trigger: 'change',
                },
            ],
        });
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    Shows.value = false;
                    goalManagementApi()
                        .getTargetMngAddOrupdata(form.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                emit('navAddorUpdata');
                            } else {
                                ElMessage.error(res.data.msg);
                                formEl.resetFields();
                            }
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
            form.value = {
                indexNum: '', //目标指标编号
                qName: '', //安全目标指标
                year: '', //年度
                level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级
                memo: '', ////备注信息
                targetType: '', ////指标类型 1:年指标 2:月指标
                completeDate: '', ////完成期限
                divideStatus: '1', ////分解状态 1:已分解 2:未分解
                value: '', ////指标值
            };
        };

        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.resetFields();
            Shows.value = false;
            form.value = {
                indexNum: '', //目标指标编号
                qName: '', //安全目标指标
                year: '', //年度
                level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级
                memo: '', ////备注信息
                targetType: '', ////指标类型 1:年指标 2:月指标
                completeDate: '', ////完成期限
                divideStatus: '1', ////分解状态 1:已分解 2:未分解
                value: '', ////指标值
            };
        };
        return {
            openDialog,
            titles,
            Shows,
            form,
            full,
            toggleFullscreen,
            rules,
            ruleFormRef,
            submitForm,
            resetForm,
            FullScreen,
        };
    },

 src/views/goalManagement/targetSettings/index.vue

@@ -1,263 +1,293 @@
<template>
<div>
        <search></search>
        <div class="minCenter">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <div class="btns">
              <div>
                <el-button type="primary" size="default" :icon="Plus" @click="openD('新建')">新建</el-button>
                <el-button type="danger" size="default" :icon="Delete" plain>删除</el-button>
              </div>
              <div>
                <!-- <el-button size="default" :icon="Upload" @click="upButton"></el-button>
    <div>
        <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item>
                        <el-button type="primary" size="default" @click="listApi">查询</el-button>
                        <el-button size="default" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="minCenter">
            <el-tabs v-model="ruleForm.searchParams.targetType" class="demo-tabs" @tab-click="handleClick">
                <div class="btns">
                    <div>
                        <el-button type="primary" size="default" :icon="Plus" @click="openD('新建')">新建</el-button>
                        <el-button type="danger" :disabled="danger" size="default" @click="onDeleteAll" :icon="Delete" plain>删除</el-button>
                    </div>
                    <div>
                        <!-- <el-button size="default" :icon="Upload" @click="upButton"></el-button>
                <el-button size="default" :icon="Download"></el-button>
                <el-button size="default" :icon="Refresh"></el-button> -->
              </div>
            </div>
            <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane>
            <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane>
          </el-tabs>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="70"
            />
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="安全目标指标" align="center" sortable>
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
              property="name"
              align="center"
              label="目标指标编号"
              sortable
            />
            <el-table-column
              property="address"
              label="年度"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标值"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标级别"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="完成期限"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="状态"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="备注信息"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              sortable
              show-overflow-tooltip
            >
              <template #default>
                <el-button link type="primary" size="default" :icon="View" @click="handleClick"
                  >查看</el-button
                >
                <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <dailogAdd ref="openAdd"></dailogAdd>
        <upData ref="upShow"></upData>
        </div>
        </div>
                    </div>
                </div>
                <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane>
                <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane>
            </el-tabs>
            <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column label="安全目标指标" align="center" property="qName" sortable />
                <el-table-column property="indexNum" align="center" label="目标指标编号" sortable />
                <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
                <el-table-column property="level" label="指标级别" align="center" sortable show-overflow-tooltip />
                <el-table-column property="completeDate" label="完成期限" align="center" sortable show-overflow-tooltip />
                <el-table-column label="状态" align="center" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <span v-if="scope.row.divideStatus == 1">已分解</span>
                        <span v-if="scope.row.divideStatus == 2">未分解</span>
                    </template>
                </el-table-column>
                <el-table-column property="memo" label="备注信息" align="center" sortable show-overflow-tooltip />
                <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button>
                        <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            <dailogAdd ref="openAdd" @navAddorUpdata="onAddorUpdata"></dailogAdd>
            <upData ref="upShow"></upData>
        </div>
    </div>
</template>
<script lang="ts">
import dailogAdd from './component/dailogAdd.vue'
import upData from '../../../components/updata/updata.vue'
import search from './component/search.vue'
import { ref, toRefs, reactive, onMounted, defineComponent } from "vue";
import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElInput,
  TabsPaneContext,
  FormInstance,
} from "element-plus";
import {
  Plus,
  Delete,
  Upload,
  Download,
  Refresh,
  View
} from "@element-plus/icons-vue";
interface User {
  date: string;
  name: string;
  address: string;
}
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import dailogAdd from './component/dailogAdd.vue';
import upData from '../../../components/updata/updata.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
  components: { ElButton, ElInput,dailogAdd,upData,search},
  setup() {


    // 下方导航与表格
    const activeName = ref("1");
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event);
    };
    const formatter = (row: User, column: TableColumnCtx<User>) => {
      return row.address;
    };

    const tableData: User[] = [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    const currentPage4 = ref(4);
    const pageSize4 = ref(100);
    const small = ref(false)
    const disabled = ref(false)
    const background = ref(false)
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
    };
    // 弹窗
   const openAdd=ref()
   const openD=(type:String,value:any)=>{
     openAdd.value.openDialog(type,value)
   }

    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    return {
      activeName,
      handleClick,
      tableData,
      formatter,
      currentPage4,
      pageSize4,
      handleSizeChange,
      handleCurrentChange,
      openAdd,
      openD,
      upShow,
      upButton,
      small,
      disabled,
      background,
      Plus,
      Delete,
      Upload,
      Download,
      Refresh,
      View
    };
  },
    components: { ElButton, ElInput, dailogAdd, upData },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: '', ////分解状态 1:已分解 2:未分解
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getTargetMngList(ruleForm)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                        currentPage4.value = res.data.pageIndex;
                        pageSize4.value = res.data.pageSize;
                        total.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        //
        const handleClick = (val: any) => {
            let targetType = JSON.parse(JSON.stringify(val));
            ruleForm.searchParams.targetType = targetType.paneName;
            listApi();
        };
        onMounted(() => {
            listApi();
        });
        const onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            // console.log(`${val} items per page`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        // 弹窗
        const openAdd = ref();
        const openD = (title: String, id: number) => {
            openAdd.value.openDialog(title, ruleForm.searchParams.targetType, id);
        };
        // 删除
        const onDelete = (id: number) => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        // 批量删除
        // const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr.toString();
            if (val.length == 1) {
                // warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                // warning.value = true;
                danger.value = true;
            } else {
                // warning.value = true;
                danger.value = false;
            }
        };
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    // ElMessage({
                    //     type: 'info',
                    //     message: 'Delete canceled',
                    // });
                });
        };
        // 上传
        // const upShow = ref();
        // const upButton = () => {
        //     upShow.value.openDialog();
        // };
        return {
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            handleClick,
            openAdd,
            openD,
            // upShow,
            // upButton,
            small,
            disabled,
            background,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            listApi,
            ruleForm,
            resetForm,
            onAddorUpdata,
            onDelete,
            handleSelectionChange,
            deletAll,
            danger,
            onDeleteAll,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
}
.minCenter {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 0 20px;
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
  padding: 0px 0px 10px 0px;
  display: flex;
  justify-content: space-between;
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages{
padding:20px 0;
display: flex;
justify-content: right;
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>