合并

Your Name

2022-09-08 b59d7d4f48f84dc856d46f6ee6c8e9300376d272

合并

 .env.development

@@ -1,10 +1,10 @@
# 本地环境
ENV = 'development'

VITE_API_URL = 'http://192.168.0.35:8008'
#VITE_API_URL = 'http://192.168.0.35:8008'
#李宇飞接口地址

#VITE_API_URL = 'http://192.168.0.50:8008'
VITE_API_URL = 'http://192.168.0.50:8008'
#张凤接口地址

#VITE_API_URL = 'http://192.168.0.29:8008'

 src/components/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue

文件已删除

 src/components/accidentManagementSystem/accidentExpress/component/openAdd.vue

文件已删除

 src/components/accidentManagementSystem/accidentExpress/index.vue

文件已删除

 src/components/accidentManagementSystem/accidentReport/component/openAdd.vue

文件已删除

 src/components/accidentManagementSystem/accidentReport/index.vue

文件已删除

 src/components/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue

文件已删除

 src/components/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue

文件已删除

 src/components/accidentManagementSystem/workInjuryDeclaration/component/openEdit.vue

文件已删除

 src/components/accidentManagementSystem/workInjuryDeclaration/index.vue

文件已删除

 src/components/contingencyManagement/abolishDialog/abolishDialog.vue

文件已删除

 src/components/contingencyManagement/abolishDialog/component/formInformationTop.vue

文件已删除

 src/components/contingencyManagement/abolishDialog/component/formInformationTops.vue

文件已删除

 src/components/contingencyManagement/abolishDialog/component/lowerPlate.vue

文件已删除

 src/components/contingencyManagement/contingency/component/addEmergencyPersonnel.vue

文件已删除

 src/components/contingencyManagement/contingency/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/contingency/component/upData.vue

文件已删除

 src/components/contingencyManagement/contingency/index.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/flowChart.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/regionsDialog.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/component/userSelect.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/implementationOfEmergencyDrill/index.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/flowChart.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue

文件已删除

 src/components/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue

文件已删除

 src/components/contingencyManagement/emergencyPlanStartRecord/component/openSee.vue

文件已删除

 src/components/contingencyManagement/emergencyPlanStartRecord/component/selectEmergencyPlan.vue

文件已删除

 src/components/contingencyManagement/emergencyPlanStartRecord/index.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/emergencySupplies/index.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/abolishLibrary.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/approval.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/approvalProcess.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/initiateApproval.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/openAdd.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/startUp.vue

文件已删除

 src/components/contingencyManagement/panManagement/component/upData.vue

文件已删除

 src/components/contingencyManagement/panManagement/index.vue

文件已删除

 src/components/contingencyManagement/processForm/component/formInformationTop.vue

文件已删除

 src/components/contingencyManagement/processForm/component/formInformationTops.vue

文件已删除

 src/components/contingencyManagement/processForm/component/lowerPlate.vue

文件已删除

 src/components/contingencyManagement/processForm/processForm.vue

文件已删除

 src/components/contingencyManagement/releaseOfDrillStart/component/formInformationTop.vue

文件已删除

 src/components/contingencyManagement/releaseOfDrillStart/component/formInformationTops.vue

文件已删除

 src/components/contingencyManagement/releaseOfDrillStart/component/lowerPlate.vue

文件已删除

 src/components/contingencyManagement/releaseOfDrillStart/releaseOfDrillStart.vue

文件已删除

 src/components/editor/index.vue

@@ -1,8 +1,8 @@
<template>
    <div class="editor-container">
        <div ref="editorToolbar"></div>
        <div ref="editorContent" :style="{ height }"></div>
    </div>
    <div class="editor-container">
        <div ref="editorToolbar"></div>
        <div ref="editorContent" :style="{ height }"></div>
    </div>
</template>

<script lang="ts">
@@ -13,103 +13,103 @@

// 定义接口来定义对象的类型
interface WangeditorState {
    editorToolbar: HTMLDivElement | null;
    editorContent: HTMLDivElement | null;
    editor: any;
    editorToolbar: HTMLDivElement | null;
    editorContent: HTMLDivElement | null;
    editor: any;
}

export default defineComponent({
    name: 'wngEditor',
    props: {
        // 节点 id
        id: {
            type: String,
            default: () => 'wangeditor'
        },
        // 是否禁用
        isDisable: {
            type: Boolean,
            default: () => false
        },
        // 内容框默认 placeholder
        placeholder: {
            type: String,
            default: () => '请输入内容'
        },
        // 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
        // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
        modelValue: String,
        // https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
        // 模式，可选 <default|simple>，默认 default
        mode: {
            type: String,
            default: () => 'default'
        },
        // 高度
        height: {
            type: String,
            default: () => '310px'
        }
    },
    setup(props, { emit }) {
        const state = reactive<WangeditorState>({
            editorToolbar: null,
            editor: null,
            editorContent: null
        });
        // 富文本配置
        const wangeditorConfig = () => {
            const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
            props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
            editorConfig.placeholder = props.placeholder;
            editorConfig.onChange = (editor: IDomEditor) => {
                // console.log('content', editor.children);
                // console.log('html', editor.getHtml());
                emit('update:modelValue', editor.getHtml());
            };
            (<any>editorConfig).MENU_CONF['uploadImage'] = {
                base64LimitSize: 10 * 1024 * 1024
            };
            return editorConfig;
        };
        //
        const toolbarConfig = () => {
            const toolbarConfig: Partial<IToolbarConfig> = {};
            toolbarConfig.toolbarKeys = toolbarKeys;
            return toolbarConfig;
        };
        // 初始化富文本
        // https://www.wangeditor.com/
        const initWangeditor = () => {
            state.editor = createEditor({
                html: props.modelValue,
                selector: state.editorContent!,
                config: wangeditorConfig(),
                mode: props.mode
            });
            createToolbar({
                editor: state.editor,
                selector: state.editorToolbar!,
                mode: props.mode,
                config: toolbarConfig()
            });
        };
        // 页面加载时
        onMounted(() => {
            initWangeditor();
        });
        // 监听双向绑定值的改变
        // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
        watch(
            () => props.modelValue,
            (value) => {
                state.editor.clear();
                state.editor.dangerouslyInsertHtml(value);
            }
        );
        return {
            ...toRefs(state)
        };
    }
    name: 'wngEditor',
    props: {
        // 节点 id
        id: {
            type: String,
            default: () => 'wangeditor',
        },
        // 是否禁用
        isDisable: {
            type: Boolean,
            default: () => false,
        },
        // 内容框默认 placeholder
        placeholder: {
            type: String,
            default: () => '请输入内容',
        },
        // 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
        // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
        modelValue: String,
        // https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
        // 模式，可选 <default|simple>，默认 default
        mode: {
            type: String,
            default: () => 'default',
        },
        // 高度
        height: {
            type: String,
            default: () => '310px',
        },
    },
    setup(props, { emit }) {
        const state = reactive<WangeditorState>({
            editorToolbar: null,
            editor: null,
            editorContent: null,
        });
        // 富文本配置
        const wangeditorConfig = () => {
            const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
            props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
            editorConfig.placeholder = props.placeholder;
            editorConfig.onChange = (editor: IDomEditor) => {
                // console.log('content', editor.children);
                // console.log('html', editor.getHtml());
                emit('update:modelValue', editor.getHtml());
            };
            (<any>editorConfig).MENU_CONF['uploadImage'] = {
                base64LimitSize: 10 * 1024 * 1024,
            };
            return editorConfig;
        };
        //
        const toolbarConfig = () => {
            const toolbarConfig: Partial<IToolbarConfig> = {};
            toolbarConfig.toolbarKeys = toolbarKeys;
            return toolbarConfig;
        };
        // 初始化富文本
        // https://www.wangeditor.com/
        const initWangeditor = () => {
            state.editor = createEditor({
                html: props.modelValue,
                selector: state.editorContent!,
                config: wangeditorConfig(),
                mode: props.mode,
            });
            createToolbar({
                editor: state.editor,
                selector: state.editorToolbar!,
                mode: props.mode,
                config: toolbarConfig(),
            });
        };
        // 页面加载时
        onMounted(() => {
            initWangeditor();
        });
        // 监听双向绑定值的改变
        // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
        watch(
            () => props.modelValue,
            (value) => {
                state.editor.clear();
                state.editor.dangerouslyInsertHtml(value);
            }
        );
        return {
            ...toRefs(state),
        };
    },
});
</script>

 src/components/equipmentDailog/Dailog.vue

@@ -654,7 +654,6 @@
                        });
                }
            });
            formEl.resetFields();
            form.value.takecareDetailList = [];
            form.value.testDetailList = [];
            form.value.repaireDetailList = [];

 src/components/facilityManagement/EquipmentStatistics/index.vue

文件已删除

 src/components/facilityManagement/InstrumentationInformation/index.vue

文件已删除

 src/components/facilityManagement/ProductionEquipment/index.vue

文件已删除

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

文件已删除

 src/components/facilityManagement/deviceType/index.vue

文件已删除

 src/components/facilityManagement/keyEquipment/index.vue

文件已删除

 src/components/facilityManagement/safetyEquipment/index.vue

文件已删除

 src/components/uploaderFile/index.vue

@@ -61,8 +61,9 @@
        };

        const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile)
            goalManagementApi()
                    .searchFile(uploadFile.fileName)
                    .searchFile(uploadFile.name)
                    .then((res) => {
                        window.open(res.data, "_blank");
                    })
@@ -104,8 +105,12 @@
            let form = new FormData();
            form.append('file', param.file);
            //组装文件名（传入后缀名）
            console.log(param)
            var fileNameList = param.file.name.split('.')
            var typeFile = param.file.name.split('.')[fileNameList.length-1]
            var fileName1 = getFileName(param.file.type.split('/')[1], 1);
            var fileName2 = getFileName(param.file.type.split('/')[1], 2);
            // var fileName2 = getFileName(param.file.type.split('/')[1], 2);
            var fileName2 = '.'+typeFile;
            goalManagementApi()
                .beforeUploadFile(fileName1, fileName2)
                .then((res) => {

 src/components/uploaderImg/index.vue

@@ -51,7 +51,8 @@
        };

        const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
            dialogImageUrl.value = uploadFile.url!;
            alert(1)
            dialogImageUrl.value = uploadFile.url;
            dialogVisible.value = true;
        };


 src/utils/request.ts

@@ -42,7 +42,8 @@
        } catch (err) {
            console.log(err);
            // 转换失败返回一个空对象
            return {};
            return {
            };
        }
    }
];

 src/views/accidentManagementSystem/accidentCases/index.vue

@@ -1,261 +1,261 @@
<template>
    <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.caseTitle" 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 @click="openD('修改', deletAll[0])">修改</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 type="selection" align="center" width="55" />
                <el-table-column label="序号" align="center" type="index" width="70" />
                <el-table-column label="标题" align="center" property="caseTitle" sortable />
                <el-table-column property="caseTime" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <DailogCases ref="Show" @onAdd="add"></DailogCases>
    </div>
</template>
<script lang="ts">
import DailogCases from './component/DailogCases.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 { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
export default defineComponent({
    components: { ElButton, ElInput,DailogCases },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                caseTitle: '',
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.caseTitle = '';
            listApi();
        };
        const listApi = () => {
            accidentManagementSystemApi()
                .getaccidentCaseList(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();
        });
<!--<template>-->
<!--    <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.caseTitle" size="default" placeholder="请输入关键词" />-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                &lt;!&ndash; <el-col :span="4">-->
<!--                    <el-form-item>-->
<!--                        <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />-->
<!--                    </el-form-item>-->
<!--                </el-col> &ndash;&gt;-->
<!--                <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>-->
<!--                    &lt;!&ndash; <el-button size="default" type="warning" :disabled="warning" :icon="EditPen" plain @click="openD('修改', deletAll[0])">修改</el-button> &ndash;&gt;-->
<!--                    <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 type="selection" align="center" width="55" />-->
<!--                <el-table-column label="序号" align="center" type="index" width="70" />-->
<!--                <el-table-column label="标题" align="center" property="caseTitle" sortable />-->
<!--                <el-table-column property="caseTime" align="center" label="发布时间" sortable />-->
<!--                &lt;!&ndash; <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />-->
<!--                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> &ndash;&gt;-->
<!--                <el-table-column label="操作" align="center" sortable show-overflow-tooltip>-->
<!--                    <template #default="scope">-->
<!--                        &lt;!&ndash; <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> &ndash;&gt;-->
<!--                        <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="total"-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--                />-->
<!--            </div>-->
<!--        </div>-->
<!--        <DailogCases ref="Show" @onAdd="add"></DailogCases>-->
<!--    </div>-->
<!--</template>-->
<!--<script lang="ts">-->
<!--import DailogCases from './component/DailogCases.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 { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';-->
<!--export default defineComponent({-->
<!--    components: { ElButton, ElInput,DailogCases },-->
<!--    setup() {-->
<!--        // 搜索条件-->
<!--        const ruleForm = reactive({-->
<!--            pageSize: 10,-->
<!--            pageIndex: 1,-->
<!--            searchParams: {-->
<!--                caseTitle: '',-->
<!--            },-->
<!--        });-->
<!--        // 下方导航与表格-->
<!--        const tableData = ref([]);-->
<!--        const currentPage4 = ref();-->
<!--        const pageSize4 = ref();-->
<!--        const total = ref();-->
<!--        const resetForm = () => {-->
<!--            ruleForm.searchParams.caseTitle = '';-->
<!--            listApi();-->
<!--        };-->
<!--        const listApi = () => {-->
<!--            accidentManagementSystemApi()-->
<!--                .getaccidentCaseList(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 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,id);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    console.log(arr)
                    accidentManagementSystemApi()
                        .getaccidentCaseDelete(arr)
                        .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;
            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(() => {
                    accidentManagementSystemApi()
                        .getaccidentCaseDelete(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 add = () => {
            listApi();
        };
        return {
            listApi,
            add,
            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;
}
.btns {
    padding: 20px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>
<!--        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,id);-->
<!--        };-->
<!--        // 删除-->
<!--        const onDelete = (id: number) => {-->
<!--            let arr = [];-->
<!--            arr.push(id);-->
<!--            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {-->
<!--                confirmButtonText: '确定',-->
<!--                cancelButtonText: '取消',-->
<!--                type: 'warning',-->
<!--            })-->
<!--                .then(() => {-->
<!--                    console.log(arr)-->
<!--                    accidentManagementSystemApi()-->
<!--                        .getaccidentCaseDelete(arr)-->
<!--                        .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;-->
<!--            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(() => {-->
<!--                    accidentManagementSystemApi()-->
<!--                        .getaccidentCaseDelete(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 add = () => {-->
<!--            listApi();-->
<!--        };-->
<!--        return {-->
<!--            listApi,-->
<!--            add,-->
<!--            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;-->
<!--}-->
<!--.btns {-->
<!--    padding: 20px 0px 10px 0px;-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--}-->
<!--.pages {-->
<!--    padding: 20px 0;-->
<!--    display: flex;-->
<!--    justify-content: right;-->
<!--}-->
<!--.tableC {-->
<!--    margin: 0 10%;-->
<!--}-->
<!--</style>-->

 src/views/contingencyManagement/abolishDialog/abolishDialog.vue

@@ -1,139 +0,0 @@
<template>
  <div class="system-user-container">
  <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
  <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#ebeef5"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">表单信息</el-menu-item>
      <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
      <formInformationTop v-if="false"></formInformationTop>
      <formInformationTops></formInformationTops>
    </div>
    <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
      <div class="title2">流程图
        <!-- <img src=""> -->
      </div>
      <div style="width:100%;height:400px"></div>
    </div>
  </div>
  <lowerPlate></lowerPlate>
  <div class="btns">
    <el-button type="primary">启动</el-button>
  </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import formInformationTop from './component/formInformationTop.vue'
import formInformationTops from './component/formInformationTops.vue'
import lowerPlate from './component/lowerPlate.vue'
export default defineComponent({
  components:{lowerPlate,formInformationTop,formInformationTops},
  setup() {
    const activeIndex = ref<any>('1');
    const handleSelect = (key: string, keyPath: string[]) => {
      // console.log(key, keyPath);
      activeIndex.value = key;
    };
    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });

    const router=useRouter()
    const Type=onMounted(()=>{
      // console.log("xxxxxxx",router)
    })

    return {
      activeIndex,
      handleSelect,
      form,
      router,
      Type
    };
  },
});
</script>
<style scoped>
.title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
.box{
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
  background-color: #fff;
  padding: 15px;
}
.tiao{
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  margin: 30px 0 ;
  position: relative;
}
.typeS{
  width: 80px;
  background-color: #fff;
  position: absolute;
  left: 30px;
  top: -9px;
  font-size: 14px;
  text-align: center;
}
.logoColor{
  background-color: #67c23a;
  color: #fff;
  padding:  5px 8px;
  border-radius: 5px;
  margin-right: 5px;
}
.btns{
  width: 100%;
  padding:20px 0;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  left: 0px;
  text-align: center;
  box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);

}
.title2{
  padding: 20px 0 20px 10px;
  width: 100%;
  border: 1px solid #dcdfe6;
}

/*弹窗底部边框线*/
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
/*弹窗顶部边框线*/
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/formInformationTop.vue

@@ -1,144 +0,0 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" style="padding: 0 20px">
            <el-tab-pane label="考核指标" name="1">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="70" />
                    <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-input v-model="form.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="检查人" />
                    <el-table-column align="center" prop="address" label="检查时间" />
                </el-table>
                <div class="tiao">
                 <div class="typeS">审批</div>
                </div>
                <el-row style="padding:20px 0">
                    <el-col :span="6" style="text-align:right">一级审批：</el-col>
                    <el-col :span="18">同意</el-col>
                </el-row>
                <el-row style="padding:0 0 20px 0">
                    <el-col :span="6"></el-col>
                    <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
</template>
<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
            const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
            const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const activeName = ref('1');
        return{
            form,
            tableData,
            activeName
        }
    },
})
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0 ;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/formInformationTops.vue

@@ -1,318 +0,0 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案名称">
                    <el-input v-model="form.name" disabled placeholder="请填写预案名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="适用部门">
          <el-tree-select
              class="select"
              placeholder="请选择"
              v-model="value"
              :data="data"
              :render-after-expand="false"
              show-checkbox
              multiple
              clearable
              disabled
          />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案类型">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="综合应急预案" value="shanghai" />
            <el-option label="现场处置方案" value="beijing" />
            <el-option label="专项应急预案" value="shanghai" />
            <el-option label="其它预案" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="危险源关联">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="是" value="shanghai" />
            <el-option label="否" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案级别">
          <el-select class="select" v-model="form.region" disabled placeholder="请选择">
            <el-option label="公司及" value="shanghai" />
            <el-option label="分厂级" value="beijing" />
            <el-option label="车间级" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="编写人">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" @click="openUser" disabled/>
            </template>
          </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="编写部门" disabled placeholder="请选择">
          <el-tree-select
              class="select"
              v-model="value2"
              :data="dataSelect"
              :render-after-expand="false"
              multiple
              check-strictly
              check-on-click-node
              clearable
              disabled
          />
                </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="发布实施日期">
          <el-date-picker v-model="datetime" type="datetime" disabled placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
      </el-col>
        </el-row>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" disabled/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
        <el-form-item label="预案附件">
          <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-change="handleChange"
              disabled
          >
            <el-button type="primary" disabled
            >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                添加相关附件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="区域名称" prop="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
              disabled
          >
            <template #append>
              <el-button :icon="Search" disabled @click="regionsDialog"/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  <checkTemplate ref="ShowRef"/>
  <userSelections ref="userRef"/>
  <RegionsDialog ref="openRef"/>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue';
import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from "/@/components/checkTemplate/index.vue"
import RegionsDialog from "/@/components/regionsDialog/index.vue";
export default defineComponent({
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
    setup() {
        const form = reactive({
            name: '',
      value: '',
      value2: '',
      teamLeader: '',

      // data: '',
      // dataSelect: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });

    // 可选择树形选择框
    const value = ref()

    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 树形选择框
    const value2 = ref()

    const dataSelect = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 应急队伍弹窗
    const ShowRef=ref()
    const daiInpt=()=>{
      ShowRef.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开编写人选择用户弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 日期选择
    const datetime = ref('')
        return {
            form,
      value,
      data,
      value2,
      dataSelect,
      openUser,
      userRef,
      Search,
      ShowRef,
      daiInpt,
      openRef,
      datetime,
      regionsDialog,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0;
    position: relative;
}
.typeS {
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor {
    background-color: #67c23a;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns {
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0;
}
.select{
  width: 100%;
}
.select ::v-deep .el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/abolishDialog/component/lowerPlate.vue

@@ -1,120 +0,0 @@
<template>
    <div class="box">
        <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="15">
                    <el-form-item label="流程标题">
                        <el-input v-model="form.names" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="下级审批日期">
                        <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                            <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.delivery">
                <el-col :span="15">
                    <el-form-item label="抄送给" prop="resource">
                        <el-input v-model="form.resource" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                        <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.type">
                <el-col :span="15">
                    <el-form-item label="指定" prop="desc">
                        <el-input v-model="form.desc" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <DailogSearchUser ref="ShowUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import { Search } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
    components:{DailogSearchUser},
    setup() {
        const formS=ref<FormInstance>()
        let form = reactive({
            names: '',
            region: '',
            date1: '',
            date2: '',
            delivery: "",
            type: "",
            resource: '',
            desc: '',
        });
        const typeChang=()=>{
         console.log('tag',form)
        }
        const rules = reactive<FormRules>({
  resource: [
    {
      type: 'array',
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ]})
  const ShowUser=ref()
  const openDai =()=>{
   ShowUser.value.openDailog()
  }
        return {
            form,
            rules,
            formS,
            typeChang,
            ShowUser,
            openDai,
            Search,
        };
    },
});
</script>

<style scoped>
.box {
    margin: 30px 0 100px 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
    padding: 20px;
}
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue

@@ -1,305 +0,0 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="40%"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          :disabled="disabled"
          label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="选择人员" prop="name">
              <el-input
                  v-model="ruleForm.name"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员工号" prop="jobNumber">
              <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请填写人员名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员性别" prop="gender">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="职位" prop="position">
              <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
<!--          <el-button size="default" type="primary" @click="addForm(ruleFormRef)">继续添加</el-button>-->
                    <el-button size="default" @click="resetForm(ruleFormRef)">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)" >确定</el-button>
                </span>
      </template>
    </el-dialog>
    <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
  </div>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  defineComponent
} from 'vue';

import type {
  FormRules,
  FormInstance,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
import {contingencyApi} from "/@/api/contingencyManagement/contingency";

export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
    DailogSearchUserManger
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = ref ({
      teamId: '',
      userUid: '',
      gender: '',
      jobNumber: '', // 人员工号
      name: '', // 人员名称
      phone: '', // 手机号码
      position: '', // 职位
    });
    const rules = reactive<FormRules>({
      jobNumber: [
        {
          required: true,
          message: '人员工号不能为空',
          trigger: 'change',
        },
      ],
      personnelName: [
        {
          required: true,
          message: '人员名称不能为空',
          trigger: 'change',
        },
      ],
      personnelGender: [
        {
          required: true,
          message: '人员性别不能为空',
          trigger: 'change',
        },
      ],
      phone: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'change',
        },
      ],
      position: [
        {
          required: true,
          message: '职位不能为空',
          trigger: 'change',
        },
      ],
    })
    const titles = ref();
    const disabled = ref();
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急队伍人员') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            // console.log('-------',ruleForm.value)
            // emit('myAdd', ruleForm.value);
            contingencyApi()
                .addEmergencyTeamPersonnel(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
      else if (title == '修改应急队伍人员') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            contingencyApi()
                .editEmergencyTeamPersonnel(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
        formEl.resetFields();
        ruleForm.value = {
          teamId: '',
          userUid: '',
          gender: '',
          jobNumber: '', // 人员工号
          name: '', // 人员名称
          phone: '', // 手机号码
          position: '', // 职位
        };
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };

    // 打开弹窗
    const openDialog = (title: string, id: number,teamId:number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      ruleForm.value.teamId = teamId

      if (title == '查看应急队伍人员' || title == '修改应急队伍人员') {
        contingencyApi()
            .seeEmergencyTeamPersonnel(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.userUid=e[0].uid
      ruleForm.value.gender=e[0].sex
      ruleForm.value.name=e[0].realName
      ruleForm.value.jobNumber=e[0].jobNumber
      ruleForm.value.phone=e[0].phone
      ruleForm.value.position=e[0].position
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      // closeDialog,
      isShowDialog,
      ruleFormRef,
      // submitForm,
      // onCancel,
      ruleForm,
      rules,
      Search,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
      openUser,
      userRef,
      onUser,
      submitForm,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
</style>

 src/views/contingencyManagement/contingency/component/openAdd.vue

@@ -1,569 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="resetForm(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" label-width="120px"
                     :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="队伍名称" prop="teamName">
                            <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="队伍级别" prop="teamLevel">
                            <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择">
                                <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 :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="队伍负责人" prop="principalName">
                            <el-input v-model="ruleForm.principalName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser"/>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="负责人部门" prop="principalDepartmentId">
                            <el-tree-select v-model="ruleForm.principalDepartmentId" :data="newTreeList" class="w100"
                                            :props="propse" clearable placeholder="请选择"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="负责人手机" prop="principalPhone">
                            <el-input v-model="ruleForm.principalPhone" placeholder="请填写负责人手机"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="固定电话" prop="telephoneNumber">
                            <el-input v-model="ruleForm.telephoneNumber" placeholder="请填写固定电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="队伍描述" prop="teamDesc">
                            <el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" maxlength="150"
                                      placeholder="请填写队伍描述"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="相关附件" prop="fileList">
                            <uploaderFile :fileList="fileList" :systemName="'EMERGENCY'" :disabled="disabled"
                                          @successUploader="successUploader"></uploaderFile>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="应急队伍人员" name="first" >
                            <el-button type="primary" size="default" @click="onAddEmergencyPersonnel(ruleFormRef)" :disabled="disabled">新增
                            </el-button>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%; margin-top: 15px"
                                    ref="multipleTableRef"
                                    :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                                    :disabled="disabled"
                            >
                                <el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="name" label="人员名称" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                                <el-table-column label="操作" width="250" align="center">
                                    <template #default="scope">
                                        <el-button :disabled="disabled" size="small" @click="onEdit('查看应急队伍人员',scope.row.id)">查看
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onEdit('修改应急队伍人员',scope.row.id)"
                                                   style="margin-right: 5px">编辑
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onRowDel(scope.row.id)"
                                                   style="margin-right: 5px">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" v-if="disabled == true ? false : true" type="primary"
                               @click="onSubmit(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AddEmergencyPersonnel ref="addRef" @myAdd="onMyAdd"/>
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
    </div>
</template>

<script lang="ts">
    import {
        reactive,
        ref,
        defineComponent,
        onMounted,
        // toRefs,
    } from 'vue';
    import {
        ElMessage,
        ElMessageBox,
    } from 'element-plus';

    import type {
        UploadUserFile,
        TabsPaneContext,
        FormInstance,
        FormRules,
    } from 'element-plus'

    import {
        Search,
        FullScreen
    } from '@element-plus/icons-vue'
    import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
    import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
    import {contingencyApi} from "/@/api/contingencyManagement/contingency";
    import {goalManagementApi} from "/@/api/goalManagement";
    import uploaderFile from '/@/components/uploaderFile/index.vue';
    // import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";


    export default defineComponent({
        name: 'openAdd',
        components: {
            AddEmergencyPersonnel,
            DailogSearchUserManger,
            uploaderFile
        },
        setup(prop, {emit}) {
            const isShowDialog = ref(false);
            const ruleFormRef = ref<FormInstance>();
            const ruleForm = ref({
                teamName: '', // 队伍名称
                teamLevel: '', // 队伍级别
                principalUid: '', // 队伍负责人
                principalName: '',
                principalDepartmentId: '',  //负责人部门
                principalPhone: '', // 负责人手机
                telephoneNumber: '', // 固定电话
                teamDesc: '',  //队伍描述
                fileList: [],
                memberList: []
            });
            const titles = ref();
            const disabled = ref();
            const teamId = ref()
            // 打开弹窗
            const openDialog = (title: string, id: number, type: boolean) => {
                isShowDialog.value = true;
                titles.value = title;
                disabled.value = type;
                teamId.value = id
                if (title == '查看应急队伍管理' || title == '修改应急队伍管理') {
                    contingencyApi()
                        .seeEmergencyTeam(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ruleForm.value = res.data.data;
                                fileList.value = (res.data.data.fileList?res.data.data.fileList:[])
                                initFileListData()
                                listApi()
                            }
                        });
                }
            }
            // 上传附件
            const fileList = ref([])
            const initFileListData = async () => {
                for(var a = 0;a<fileList.value.length;a++){
                    fileList.value[a].name = fileList.value[a].fileName
                }
            }
            // 上传成功组装数据
            const successUploader = (list) =>{
                fileList.value = list
                const formFileList = []
                for(var a = 0;a<fileList.value.length;a++){
                    formFileList.push(
                        {
                            fileName:fileList.value[a].fileName,
                            fileUrl:''
                        }
                    )
                }
                ruleForm.value.fileList = formFileList
            }
            //定义树形下拉框
            const principalDepartmentId = ref()
            const data = ref()



            //el-tree-select回显
            const propse = {
                label: 'depName',
                children: 'children',
            };
            const newTreeList = [];
            //得到部门树
            const department = async () => {
                await goalManagementApi()
                    .getTreedepartment()
                    .then((res) => {
                        if (res.data.code == 200) {
                            data.value = res.data.data;
                            getTreeList(res.data.data, newTreeList);
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            };
            // 递归树状数据且修改字段名
            const getTreeList = (treeList, newTreeList) => {
                treeList.map((c) => {
                    let tempData = {
                        depName: c.depName,
                        value: c.depId,
                        children: [],
                    };
                    if (c.children && c.children.length > 0) {
                        tempData.children = [];
                        getTreeList(c.children, tempData.children);
                    }
                    newTreeList.push(tempData);
                });
            };
            onMounted(() => {
                department();
            });




            // 打开用户选择弹窗
            const userRef = ref();
            const openUser = () => {
                userRef.value.openDailog();
            };
            const onUser = (e: any) => {
                ruleForm.value.principalUid = e[0].uid
                ruleForm.value.principalName = e[0].realName
            };
            //定义tabs切换
            const activeName = ref('first')
            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event)
            }

            // 必填项提示
            const rules = reactive<FormRules>({
                teamName: [
                    {
                        required: true,
                        message: '队伍名称不能为空',
                        trigger: 'change',
                    },
                ],
                teamLevel: [
                    {
                        required: true,
                        message: '队伍级别不能为空',
                        trigger: 'change',
                    },
                ],
                principalUid: [
                    {
                        required: true,
                        message: '队伍负责人不能为空',
                        trigger: 'change',
                    },
                ],
                principalDepartmentId: [
                    {
                        required: true,
                        message: '负责人部门不能为空',
                        trigger: 'change',
                    },
                ],
                principalPhone: [
                    {
                        required: true,
                        message: '负责人手机不能为空',
                        trigger: 'change',
                    },
                ],
                telephoneNumber: [
                    {
                        required: true,
                        message: '固定电话不能为空',
                        trigger: 'change',
                    },
                ],
            })
            //全屏
            const full = ref(false);
            const toggleFullscreen = () => {
                if (full.value == false) {
                    full.value = true;
                } else {
                    full.value = false;
                }
            };
            const onSubmit = async (title: string, formEl: FormInstance | undefined) => {
                if(!ruleForm.value.fileList){
                    ruleForm.value.fileList = []
                }
                if (title == '新建应急队伍管理') {
                    if (!formEl) return;
                    await formEl.validate((valid, fields) => {
                        if (valid) {
                            isShowDialog.value = false;
                            if(teamId.value==null||teamId.value==''){
                                contingencyApi()
                                    .addEmergencyTeam(ruleForm.value)
                                    .then((res) => {
                                        if (res.data.code == 200) {
                                            ElMessage({
                                                showClose: true,
                                                message: res.data.msg,
                                                type: 'success',
                                            });
                                            emit('myAdd', true);
                                        } else {
                                            ElMessage({
                                                showClose: true,
                                                message: res.data.msg,
                                                type: 'error',
                                            });
                                            emit('myAdd', true);
                                        }
                                        formEl.resetFields();
                                    });
                            }else {
                                ElMessage({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success',
                                });
                                emit('myAdd', true);
                            }
                        } else {
                            console.log('error submit!', fields);
                        }
                    });
                } else if (title == '修改应急队伍管理') {
                    if (!formEl) return;
                    await formEl.validate((valid, fields) => {
                        if (valid) {
                            isShowDialog.value = false;
                            contingencyApi()
                                .editEmergencyTeam(ruleForm.value)
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        ElMessage({
                                            showClose: true,
                                            message: '修改成功',
                                            type: 'success',
                                        });
                                        emit('myAdd', true);
                                    } else {
                                        ElMessage({
                                            showClose: true,
                                            message: res.data.msg,
                                            type: 'error',
                                        });
                                        emit('myAdd', true);
                                    }
                                    formEl.resetFields();
                                });
                        } else {
                            console.log('error submit!', fields);
                        }
                    });
                    formEl.resetFields();
                    ruleForm.value = {
                        teamName: '', // 队伍名称
                        teamLevel: '', // 队伍级别
                        principalUid: '', // 队伍负责人
                        principalDepartmentId: '',  //负责人部门
                        principalPhone: '', // 负责人手机
                        telephoneNumber: '', // 固定电话
                        teamDesc: '',  //队伍描述
                        fileList: [],
                        memberList: []
                    };
                }
            };
            const resetForm = (formEl: FormInstance | undefined) => {
                isShowDialog.value = false;
                if (!formEl) return;
                formEl.resetFields();
                fileList.value = []
                tableData.value=[]
                ruleForm.value = {}
            };
            // 定义表格数据
            const tableData = ref([]);
            //添加队伍负责人弹窗
            const addRef = ref();
            const onAddEmergencyPersonnel = async (formEl: FormInstance | undefined) => {
                if(!ruleForm.value.fileList){
                    ruleForm.value.fileList = []
                }
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        // isShowDialog.value = false;
                        if(teamId.value == ''||teamId.value==null){
                            ElMessageBox.confirm('确认添加此应急队伍？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                            })
                                .then(() => {
                                    contingencyApi()
                                        .addEmergencyTeam(ruleForm.value)
                                        .then((res) => {
                                            if (res.data.code == 200) {
                                                ElMessage({
                                                    showClose: true,
                                                    message: res.data.msg,
                                                    type: 'success',
                                                });
                                                teamId.value = res.data.data.id
                                                addRef.value.openDialog('新建应急队伍人员','',teamId.value);
                                            } else {
                                                ElMessage({
                                                    showClose: true,
                                                    message: res.data.msg,
                                                    type: 'error',
                                                });
                                            }
                                        });
                                })
                                .catch(() => {});

                        }else {
                            addRef.value.openDialog('新建应急队伍人员','',teamId.value);
                        }


                    } else {
                        console.log('error submit!', fields);
                    }
                });
            };
            // 请求列表数据
            const listApi = async () => {
                let res = await contingencyApi().getEmergencyTeamPersonnelList(teamId.value);
                if (res.data.code == 200) {
                    tableData.value = res.data.data;
                } else {
                    ElMessage.error(res.data.msg);
                }
            };
            // 新增后刷新
            const onMyAdd = (e: object) => {
                listApi();
            };
            // 打开修改弹窗
            const onEdit = (val: string, row: object) => {
                if (val == '查看应急队伍人员') {
                    addRef.value.openDialog('查看应急队伍人员', row,teamId.value, true);
                } else {
                    addRef.value.openDialog('修改应急队伍人员', row,teamId.value, false);
                }
            };
            // 删除
            const onRowDel = (data: any) => {
                ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    contingencyApi()
                        .deleteEmergencyTeamPersonnel(data)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi()
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi()
                            }
                        });
                })
                    .catch(() => {
                    });
            };
            return {
                openDialog,
                fileList,
                principalDepartmentId,
                data,
                activeName,
                handleClick,
                tableData,
                Search,
                resetForm,
                isShowDialog,
                ruleFormRef,
                ruleForm,
                rules,
                addRef,
                userRef,
                titles,
                disabled,
                propse,
                emit,
                onSubmit,
                openUser,
                onAddEmergencyPersonnel,
                toggleFullscreen,
                FullScreen,
                full,
                onUser,
                onMyAdd,
                listApi,
                onEdit,
                onRowDel,
                department,
                teamId,
                newTreeList,
                successUploader,
                initFileListData
            };
        },
    });
</script>
<style scoped lang="scss">
    .textarea {
        height: 168px !important;
    }

    .textarea ::v-deep .el-textarea__inner {
        height: 168px !important;
    }

    ::v-deep .el-table__cell {
        font-weight: 400;
    }
</style>


 src/views/contingencyManagement/contingency/component/upData.vue

@@ -1,125 +0,0 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="导入Excel"
      width="50%"
      draggable
      :fullscreen="full"
  >
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="3"
        :on-exceed="handleExceed"
    >
      <el-button size="default">下载模板</el-button>
      <el-button size="default" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts">
import { ref,
  defineComponent,
} from "vue";
import {
  ElMessage,
  ElMessageBox
} from "element-plus";
import type {
  UploadProps,
  UploadUserFile,
} from "element-plus";
import {
  FullScreen
} from '@element-plus/icons-vue'
export default defineComponent({
  setup() {
    let dialogVisible =ref<boolean>(false)
    const fileList = ref<UploadUserFile[]>([
      // {
      //   name: "element-plus-logo.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
      // {
      //   name: "element-plus-logo2.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
    ]);

    const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
      console.log(file, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      console.log(uploadFile);
    };

    const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
      ElMessage.warning(
          `The limit is 3, you selected ${
              files.length
          } files this time, add up to ${
              files.length + uploadFiles.length
          } totally`
      );
    };

    const beforeRemove: UploadProps["beforeRemove"] = (
        uploadFile,
        uploadFiles
    ) => {
      return ElMessageBox.confirm(
          `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
          () => true,
          () => false
      );
    };
    // 打开弹窗
    const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
      dialogVisible.value=true
    }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      dialogVisible,
      fileList,
      handleRemove,
      handlePreview,
      handleExceed,
      beforeRemove,
      openDialog,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.el-upload__tip{
  margin-left: 100px;
  margin-top: 20px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #e8e8e8;
}
</style>

 src/views/contingencyManagement/contingency/index.vue

@@ -1,401 +0,0 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input size="default" v-model="listQuery.searchParams.teamName" placeholder="队伍名称"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-select size="default" v-model="listQuery.searchParams.teamLevel" placeholder="请选择队伍级别">
              <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-form-item>
             <el-button size="default" type="primary" class="ml10" @click="onSubmit">
               查询
             </el-button>
             <el-button size="default" class="ml10"  @click="submitReset">
               重置
             </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain :disabled="warning" @click="onEdit('修改', deleteAll[0])">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
        </div>
<!--        <div class="button_Right">-->
<!--          <el-button size="default" @click="upButton">-->
<!--            <el-icon>-->
<!--              <Upload />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button size="default">-->
<!--            <el-icon>-->
<!--              <Download />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button size="default">-->
<!--            <el-icon>-->
<!--              <Refresh />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--        </div>-->
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="teamName" label="队伍名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="teamLevel" label="队伍级别" show-overflow-tooltip sortable>
          <template #default="scope">
            <span v-if="scope.row.teamLevel == 1">公司</span>
            <span v-if="scope.row.teamLevel == 2">分厂-车间</span>
            <span v-if="scope.row.teamLevel == 3">工序-班组等</span>
          </template>
        </el-table-column>
        <el-table-column prop="teamDesc" label="队伍描述" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="principalPhone" label="负责人手机" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="fileList" label="相关附件" show-overflow-tooltip sortable>

        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
            class="mt15"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            v-model:currentPage="pageIndex"
            background
            v-model:page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <OpenAdd ref="addRef"  @myAdd="onMyAdd" />
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
} from 'element-plus';
import {
  Plus,
  Delete,
  // Upload,
  // Download,
  // Refresh,
  Edit,
  View,
  EditPen,
} from '@element-plus/icons-vue'

import OpenAdd from '../../contingencyManagement/contingency/component/openAdd.vue'
import UpData from '../../contingencyManagement/contingency/component/upData.vue';
import {contingencyApi} from "../../../api/contingencyManagement/contingency";

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    View,
    Edit,
    EditPen,
    Plus,
    Delete,
    // Upload,
    // Download,
    // Refresh,
    UpData,
    contingencyApi
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        teamName: "",
        teamLevel: "",
      }
    })
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const onSubmit = async () => {
      let res = await contingencyApi().getTeamManagementList(listQuery)
      if(res.data.code === '200'){
        tableData.value = res.data.data;
        for(var a = 0;a<tableData.value.length;a++){
          if(tableData.value[a].fileList!=null&&tableData.value[a].fileList!=''&&tableData.value[a].fileList.length!=0){
            tableData.value[a].fileList = tableData.value[a].fileList[0].fileName
          }
        }
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      }else{
        ElMessage({
          showClose: true,
          type:'error',
          message:res.data.msg
        })
      }
    }
    // 重置
    const submitReset = () => {
      listQuery.searchParams.teamName = '';
      listQuery.searchParams.teamLevel = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    const deleteAll = 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);
      }
      deleteAll.value = arr;
      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 upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }
    // 打开新增应急队伍弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急队伍管理');
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 打开修改应急队伍弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急队伍管理',row,true);
      } else {
        addRef.value.openDialog('修改应急队伍管理',row,false);
      }
    };
    // 删除用户
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contingencyApi()
          .deleteEmergencyTeam([data])
          .then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                showClose: true,
                message: res.data.msg,
                type: 'success',
              });
              onSubmit();
            } else {
              ElMessage({
                showClose: true,
                message: res.data.msg,
                type: 'error',
              });
              onSubmit();
            }
          });
      }).catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            contingencyApi()
                .deleteEmergencyTeam(deleteAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    onSubmit();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    onSubmit();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
    };
    const onHandleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      listQuery,
      onSubmit,
      // upButton,
      // upShow,
      onOpenAdd,  //新增
      addRef,
      pageIndex,
      pageSize,
      total,
      onEdit,
      handleSelectionChange,
      submitReset,
      onRowDel,
      onMyAdd,
      tableData,
      onDeleteAll,
      onHandleSizeChange,
      onHandleCurrentChange,
      deleteAll,
      warning,
      danger,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
  .button_Line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.el-form .el-form-item{
  margin-bottom: 0px!important;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/flowChart.vue

@@ -1,325 +0,0 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="应急演练计划--修改审批进度"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <!-- <img class="process-status-img" src="src/assets/icon.png"> -->
      <el-tabs type="border-card">
        <el-tab-pane label="流转记录">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流转记录</span>
              </div>
            </template>
            <div>
              <el-steps :active="2">
                <el-step title="开始" description="胡海涛,2022-07-09 20:41:50" />
                <el-step title="一级审批" description="管理员,2022-07-09 20:41:50" />
              </el-steps>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="执行环节" width="120" />
              <el-table-column prop="name" label="执行人" width="120" />
              <el-table-column prop="address" label="开始时间" width="100" />
              <el-table-column prop="address" label="结束时间" width="100" />
              <el-table-column prop="address" label="办理状态" width="100" />
              <el-table-column prop="address" label="审批意见" width="100" />
              <el-table-column prop="address" label="任务历时" width="100" />
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程信息">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程信息</span>
              </div>
            </template>
            <div>
              <el-timeline>
                <el-timeline-item timestamp="2018/4/12" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4 style="margin: 10px 0;padding-bottom: 10px;">一级审批</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">管理员</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
<!--                             <el-tag-->
<!--                                 v-for="item in items"-->
<!--                                 :key="item.label"-->
<!--                                 :type="item.type"-->
<!--                                 class="mx-1"-->
<!--                                 effect="dark"-->
<!--                             >-->
<!--                               {{ item.label }}-->
<!--                             </el-tag>-->
                             <p class="text">等待审核</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top" color="rgb(63, 158, 255)">
                  <el-card>
                    <h4>开始</h4>
                    <el-row>
                      <el-col class="tip" :span="22" :offset="1">
                        <div class="item">
                          <span class="label">审批人：</span>
                          <span class="value">胡海涛</span>
                        </div>
                        <div class="item">
                          <span class="label">办理状态：</span>
                          <span class="value">
                            <p class="text">开始</p>
                          </span>
                        </div>
                        <div class="item">
                          <span class="label">审批意见：</span>
                          <span class="value">等待审核</span>
                        </div>
                        <div class="item">
                          <span class="label">开始时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">结束时间：</span>
                          <span class="value">2022-07-09 20:41:50</span>
                        </div>
                        <div class="item">
                          <span class="label">用时：</span>
                          <span class="value">0秒</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程图">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>流程图</span>
              </div>
            </template>
            <div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <RegionsDialog ref="Shows"/>
    <UserCheckbox ref="userRef"/>
  </div>
</template>

<script lang="ts">
import {

  ref,
  defineComponent
} from 'vue';

import type {
  TagProps,
} from 'element-plus'

import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import UserCheckbox from "/@/components/userCheckbox/index.vue"
import RegionsDialog from "/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/regionsDialog.vue"

export default defineComponent({
  name: 'openAdd',
  components: {
    RegionsDialog,
    UserCheckbox,
  },
  setup() {
    const isShowDialog = ref(false)
    // 打开弹窗
    const openDialog = () => {
      // state.ruleForm = row;
      isShowDialog.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      isShowDialog.value = false;
    };
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: '2022-07-09 20:41:50',
      },
    ]

    type Item = { type: TagProps['type']; label: string }

    const items = ref<Array<Item>>([
      { type: '', label: '等待审核' },
    ])
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      isShowDialog,
      Search,
      tableData,
      items,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.process-status-img{
  width: 128px;
  height: auto;
  position: absolute;
  right: 10px;
  top: 60px;
  z-index: 999;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
//tabs字体颜色
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: #a9d86e!important;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
//.box-card {
//  width: 480px;
//}
//步骤条字体大小
::v-deep  .el-step__icon-inner{
  font-size: 14px!important;
}
//步骤条颜色
::v-deep .el-step__line{
  background-color: #409eff;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
.item{
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}
.item .label {
  display: inline-block;
  height: 100%;
  width: 70px;
  font-size: 14px;
  color: #5e6d82;
  text-align: end;
  vertical-align: top;
}
.item .value {
  padding-left: 10px;
  font-size: 14px;
  max-width: calc(100% - 90px);
  color: #5e6d82;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text{
  background-color: #409eff;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  display: inline-block;
}
</style>

 src/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/index.vue

@@ -1,404 +0,0 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="button_Line">
        <div class="button_Left mb15">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
        </div>
        <div class="button_Right">
<!--          <el-button @click="upButton">-->
<!--            <el-icon>-->
<!--              <Upload />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Download />-->
<!--            </el-icon>-->
<!--          </el-button>-->
<!--          <el-button>-->
<!--            <el-icon>-->
<!--              <Refresh />-->
<!--            </el-icon>-->
<!--          </el-button>-->
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="drillName" label="演练名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillAddress" label="演练地点" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="drillWay" label="演练方式" show-overflow-tooltip sortable>
          <template #default="scope">
            <span v-if="scope.row.drillWay == 1">综合</span>
            <span v-if="scope.row.drillWay == 2">桌面</span>
            <span v-if="scope.row.drillWay == 3">专项</span>
          </template>
        </el-table-column>
        <el-table-column prop="drillLevel" label="演练级别" show-overflow-tooltip sortable>
          <template #default="scope">
            <span v-if="scope.row.drillLevel == 1">公司级</span>
            <span v-if="scope.row.drillLevel == 2">分厂级</span>
            <span v-if="scope.row.drillLevel == 3">车间级</span>
          </template>
        </el-table-column>
        <el-table-column prop="drillPlanDate" label="计划演练日期" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="gmtModitify" label="修改时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="260" align="center">
          <template #default="scope">
            <!--<el-button size="small" text type="primary" @click="releaseOfDrillPlan(0)">-->
              <!--<el-icon style="margin-right: 5px;">-->
                <!--<VideoPlay />-->
              <!--</el-icon>启动-->
            <!--</el-button>-->
            <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <EditPen />
              </el-icon>修改
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <OpenAdd ref="addRef" @myAdd="onMyAdd"/>
<!--    <FlowChart ref="flowRef"></FlowChart>-->
    <upData ref="upShow"></upData>
  </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  // ElTable,
} from 'element-plus';
import {
  Plus,
  Delete,
  // Upload,
  // Download,
  // Refresh,
  View,
  VideoPlay,
  EditPen,
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router"
import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/openAdd.vue';
// import FlowChart from '/@/views/contingencyManagement/emergencyDrill/releaseOfDrillPlan/component/flowChart.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import { releaseDrillPlanApi } from '/@/api/contingencyManagement/emergencyDrillPlan';

export default defineComponent({
  name: 'systemUser',
  components: {
    OpenAdd,
    EditPen,
    Plus,
    View,
    Delete,
    // Upload,
    // Download,
    // Refresh,
    VideoPlay,
    UpData,
    // FlowChart,
  },
  setup() {
    // 列表参数
    const listQuery = reactive({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        drillName: ''
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 列表数据请求
    const listApi = async () => {
      let res = await releaseDrillPlanApi().getReleaseDrillPlanList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
    };
    onMounted(() => {
      listApi();
    });
    // 上传
    // const upShow=ref()
    // const upButton=()=>{
    //   upShow.value.openDialog()
    // }

    // 打开新增弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急演练计划发布',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急演练计划发布',row,true);
      } else {
        addRef.value.openDialog('修改应急演练计划发布',row,false);
      }
    };
    // 打开修改用户弹窗
    // const flowRef = ref();
    // const onflowChart = (row: TableDataRow) => {
    //   flowRef.value.openDialog(row);
    // };
    // 删除
    const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        releaseDrillPlanApi()
            .deleteReleaseDrillPlan(arr)
            .then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'success',
                });
                listApi();
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
                listApi();
              }
            });
      })
          .catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            releaseDrillPlanApi()
                .deleteReleaseDrillPlan(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      listApi();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      listApi();
    };
    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;
      // console.log(deletAll.value);
      if (val.length == 1) {
        danger.value = false;
      }  else if (val.length == 0) {
        danger.value = true;
      } else {
        danger.value = false;
      }
    };

    // 启动跳转
    const router=useRouter()
    const releaseOfDrillPlan=(data:string)=>{
      router.push({
        path:"/releaseOfDrillStart",
        query:{
          type:data
        }
      })
    }
    return {
      // upButton,
      // upShow,
      tableData,
      // onflowChart,
      // flowRef,
      onOpenAdd,  //新增
      addRef,
      onRowDel,
      View ,
      pageIndex,
      listQuery,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      router,
      releaseOfDrillPlan,
      listApi,
      danger,
      deletAll,
      handleSelectionChange,
      onMyAdd,
      onDeleteAll,
      onEdit,
      total,
    };
  },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
}
.tableForm{
  margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
}
</style>

 src/views/contingencyManagement/panManagement/component/abolishLibrary.vue

@@ -1,226 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog title="废止库" v-model="isShowDialog" width="60%" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-table
                        :data="tableData"
                        style="width: 100%; margin-top: 15px"
                        ref="multipleTableRef"
                        :model="formInline"
                        :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                    >
                        <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable>
                            <template #default="scope">
                                <div v-if="scope.row.type==1">综合应急预案</div>
                                <div v-if="scope.row.type==2">现场处置方案</div>
                                <div v-if="scope.row.type==3">专项应急预案</div>
                                <div v-if="scope.row.type==4">其他预案</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="authorName" label="编写人" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column prop="releaseDate" label="发布实施日期" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template #default="scope">
                                <el-button size="small" text type="primary" @click="onReduction(scope.row.id)">还原 </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div class="pages">
                <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :pager-count="5"
                    class="mt15"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, onMounted } from 'vue';

import type { FormInstance } from 'element-plus';
import {
    // ElMessageBox,
    ElMessage,
} from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanApi } from '../../../../api/contingencyManagement/emergencyPlan';
export default defineComponent({
    name: 'abolishLibrary',
    components: {},
    setup(prop, { emit }) {
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                abolishStatus: true,
            },
        });
        // 定义表格数据
        const tableData = ref([]);

        // 列表数据请求
        const openDialog = async () => {
            isShowDialog.value = true;
            let res = await emergencyPlanApi().getEmergencyPlanList(listQuery);
            if (res.data.code === '200') {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    type: 'error',
                    message: res.data.msg,
                });
            }
        };
        const isShowDialog = ref(false);

        const ruleFormRef = ref<FormInstance>();
        // 打开弹窗
        // const openDialog = () => {
        //   isShowDialog.value = true;
        // };
        // 关闭弹窗
        const closeDialog = () => {
            isShowDialog.value = false;
        };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        const onReduction = async (id: number) => {
            isShowDialog.value = false;
            emergencyPlanApi()
                .reductionEmergencyTeam(id)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('myAdd', true);
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                        emit('myAdd', true);
                        openDialog();
                    }
                })
                .catch(() => {});
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            closeDialog,
            isShowDialog,
            onCancel,
            tableData,
            Search,
            ruleFormRef,
            pageIndex,
            pageSize,
            handleSizeChange,
            handleCurrentChange,
            toggleFullscreen,
            FullScreen,
            full,
            listQuery,
            // onSubmit,
            total,
            emit,
            onReduction,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
//分页
.pages {
    display: flex;
    justify-content: flex-end;
}
::v-deep .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

 src/views/contingencyManagement/panManagement/component/approval.vue

@@ -1,239 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批名称" prop="workName">
                            <el-input v-model="ruleForm.workName" placeholder="请填写队伍名称" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批标题" prop="title">
                            <el-input v-model="ruleForm.title" placeholder="请填写审批名称" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批人" prop="approvePersonId">
                            <el-input v-model="ruleForm.approvePersonName" placeholder="请选择" class="input-with-select" disabled>
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" :disabled="disabled"/>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="审批结果" prop="authorUid">
                            <el-radio-group v-model="ruleForm.approveResult">
                                <el-radio :label="false">不通过</el-radio>
                                <el-radio :label="true">通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="审批意见" prop="approveMemo">
                            <el-input v-model="ruleForm.approveMemo" type="textarea" placeholder="请填写审批意见"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="是否完成" prop="complete" @change="typeChang">
                            <el-radio-group v-model="ruleForm.complete">
                                <el-radio :label="false">是</el-radio>
                                <el-radio :label="true">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.complete" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批名称" prop="twoWorkName">
                            <el-input v-model="ruleForm.twoWorkName" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.complete" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批标题" prop="twoTitle">
                            <el-input v-model="ruleForm.twoTitle" placeholder="请填写审批名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.complete" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批人" prop="twoApprovePersonName">
                            <el-input v-model="ruleForm.twoApprovePersonName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser" />
    </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';

export default defineComponent({
    name: 'openAdd',
    components: {
        DailogSearchUserManger,
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            approveId: '',
            workName: '', // 审批名称
            title: '', //审批标题
            approvePersonId: '', //
            approvePersonName: '', // 审批人
            approveStatus: 2, //审批状态
            relateType: 1, //业务类型
            approveResult: false, //审批结果
            approveMemo: '', //审批意见
            relateId: '',
            twoWorkName: '',
            twoTitle: '',
            twoApprovePersonId: '',
            twoApprovePersonName: '',
        });
        const titles = ref();
        const disabled = ref();
        const uid = ref();
        // 打开弹窗
        const openDialog = (title: string, approveId: number, type: boolean, id: number) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;

            uid.value = approveId;
            if (title == '查看审批' || title == '审批') {
                emergencyPlanApi()
                    .approvalProcessEmergencyPlan(approveId)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                            ruleForm.value.relateId = id;
                        }
                    });
            }
        };
        const submitForm = async () => {
            console.log(ruleForm.value);

            ruleForm.value.workName = ruleForm.value.twoWorkName;
            ruleForm.value.title = ruleForm.value.twoTitle;
            ruleForm.value.approvePersonId = ruleForm.value.twoApprovePersonId;
            ruleForm.value.approvePersonName = ruleForm.value.twoApprovePersonName;
            ruleForm.value.relateType = 1;
            isShowDialog.value = false;
          if(ruleForm.value.complete == false)  {
            ruleForm.value.approveStatus=3
          }
            delete ruleForm.value.gmtCreate
            delete ruleForm.value.complete
            delete ruleForm.value.submitPersonName

            delete ruleForm.value.twoApprovePersonId
            delete ruleForm.value.twoApprovePersonName
            delete ruleForm.value.twoTitle
            delete ruleForm.value.twoWorkName
            emergencyPlanApi()
                .editApprovalEmergencyPlan(ruleForm.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            showClose: true,
                            message: '修改成功',
                            type: 'success',
                        });
                        emit('myAdd', true);
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                        emit('myAdd', true);
                    }
                });
        };
        const resetForm = () => {
            isShowDialog.value = false;
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDailog();
        };
        //回显
        const onUser = (e: any) => {
            ruleForm.value.twoApprovePersonId = e[0].uid;
            ruleForm.value.twoApprovePersonName = e[0].realName;
        };
        const typeChang = () => {
            console.log('tag', ruleForm);
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            Search,
            submitForm,
            openUser,
            userRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
            typeChang,
            uid,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/panManagement/component/approvalProcess.vue

@@ -1,196 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog title="查看审批流程" v-model="isShowDialog" width="60%" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-row :gutter="35">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                    <el-table
                        :data="tableData"
                        style="width: 100%; margin-top: 15px"
                        ref="multipleTableRef"
                        :model="formInline"
                        :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                    >
                        <el-table-column prop="workName" label="审批人" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column prop="title" label="审批标题" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column prop="approvePersonName" label="编写人" show-overflow-tooltip sortable></el-table-column>
                        <el-table-column prop="approveMemo" label="审批意见" show-overflow-tooltip sortable></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div class="pages">
                <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :pager-count="5"
                    class="mt15"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, onMounted } from 'vue';

import type { FormInstance } from 'element-plus';
import {
    // ElMessageBox,
    ElMessage,
} from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { emergencyPlanApi } from '../../../../api/contingencyManagement/emergencyPlan';
export default defineComponent({
    name: 'abolishLibrary',
    components: {},
    setup(prop, { emit }) {
        // 列表参数
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                relateType: 1,
                relateId: '',
                startTime: '',
                endTime: '',
            },
        });
        // 定义表格数据
        const tableData = ref([]);

        // 列表数据请求
        const uid = ref();
        const openDialog = async (id: number) => {
            isShowDialog.value = true;
      listQuery.searchParams.relateId=id
            uid.value = id;
            let res = await emergencyPlanApi().processEmergencyPlan(listQuery);
            if (res.data.code === '200') {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    type: 'error',
                    message: res.data.msg,
                });
            }
        };

        const isShowDialog = ref(false);

        const ruleFormRef = ref<FormInstance>();
        // 打开弹窗
        // const openDialog = () => {
        //   isShowDialog.value = true;
        // };
        // 关闭弹窗
        const closeDialog = () => {
            isShowDialog.value = false;
        };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            listQuery.pageSize = val;
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            closeDialog,
            isShowDialog,
            onCancel,
            tableData,
            Search,
            ruleFormRef,
            pageIndex,
            pageSize,
            handleSizeChange,
            handleCurrentChange,
            toggleFullscreen,
            FullScreen,
            full,
            listQuery,
            total,
            emit,
            uid,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
//分页
.pages {
    display: flex;
    justify-content: flex-end;
}
::v-deep .el-pagination .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

 src/views/contingencyManagement/panManagement/component/initiateApproval.vue

@@ -1,159 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog title="发起审批" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批名称" prop="workName">
                            <el-input v-model="ruleForm.workName" placeholder="请填写审批名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批标题" prop="title">
                            <el-input v-model="ruleForm.title" placeholder="请填写审批名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="审批人" prop="approvePersonId">
                            <el-input v-model="ruleForm.approvePersonName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm" size="default">关闭</el-button>
                    <el-button size="default" type="primary" @click="submitForm">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser" />
    </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';

export default defineComponent({
    name: 'openAdd',
    components: {
        DailogSearchUserManger,
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            workName: '', // 审批名称
            title: '', //审批标题
            approvePersonId: '',
            approvePersonName: '',
            approveStatus: 2,
            relateType: 1,
            relateId: '',
        });
        const titles = ref();

        // 打开弹窗
        const openDialog = (title: string, id: number) => {
            isShowDialog.value = true;
            titles.value = title;
            ruleForm.value.relateId = id;
            uid.value = id;
        };
        const uid = ref();
        const submitForm = async () => {
            isShowDialog.value = false;

            emergencyPlanApi()
                .approvalEmergencyPlan(ruleForm.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('myAdd', true);
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                        emit('myAdd', true);
                    }
                });
        };
        const resetForm = () => {
            isShowDialog.value = false;
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDailog();
        };
        //回显
        const onUser = (e: any) => {
            ruleForm.value.approvePersonId = e[0].uid;
            ruleForm.value.approvePersonName = e[0].realName;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            Search,
            submitForm,
            openUser,
            userRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
            uid,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/panManagement/component/openAdd.vue

@@ -1,471 +0,0 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog
            :title="titles"
            v-model="isShowDialog"
            width="50%"
            draggable
            :fullscreen="full"
            :close-on-click-modal="false"
            @close="resetForm(ruleFormRef)"
        >
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写队伍名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="适用部门" prop="responsibleDepartment">
                            <el-tree-select
                                v-model="responsibleDepartment"
                                :data="newTreeList"
                                class="w100"
                                clearable
                                :props="propse"
                                multiple
                                :render-after-expand="false"
                                check-strictly
                                check-on-click-node
                                placeholder="请选择"
                                @change="changeDepartment"
                            />
                            <el-divider />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案类型" prop="type">
                            <el-select v-model="ruleForm.type" class="w100" placeholder="请选择">
                                <el-option label="综合应急预案" value="1"></el-option>
                                <el-option label="现场处置方案" value="2"></el-option>
                                <el-option label="专项应急预案" value="3"></el-option>
                                <el-option label="其他预案" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="危险源关联" prop="associatedDanger">
                            <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择">
                                <el-option label="是" :value="false"></el-option>
                                <el-option label="否" :value="true"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预案级别" prop="level">
                            <el-select v-model="ruleForm.level" class="w100" placeholder="请选择">
                                <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 :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="编写人" prop="authorId">
                            <el-input v-model="ruleForm.authorName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="编写部门" prop="authorDeptId">
                            <el-tree-select
                                v-model="ruleForm.authorDeptId"
                                :data="newTreeList"
                                class="w100"
                                :props="propse"
                                clearable
                                :render-after-expand="false"
                                placeholder="请选择"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发布实施日期" prop="releaseDate">
                            <el-date-picker
                                v-model="ruleForm.releaseDate"
                                type="datetime"
                                class="w100"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急队伍" prop="emergencyTeam">
                            <el-input v-model="ruleForm.teamName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="daiInpt(0)" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="相关附件">
                            <uploaderFile :fileList="fileList" :systemName="'EMERGENCY'" :disabled="disabled"
                                          @successUploader="successUploader"></uploaderFile>
                        </el-form-item>
                    </el-col>
                    <!--          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
                    <!--            <el-form-item label="区域名称" prop="areaName">-->
                    <!--              <el-input-->
                    <!--                  v-model="ruleForm.areaName"-->
                    <!--                  placeholder="请选择"-->
                    <!--                  class="input-with-select"-->
                    <!--              >-->
                    <!--                <template #append>-->
                    <!--                  <el-button :icon="Search" @click="regionsDialog"/>-->
                    <!--                </template>-->
                    <!--              </el-input>-->
                    <!--            </el-form-item>-->
                    <!--          </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <CheckTemplate ref="Shows" @SearchUser="SearchUser" />
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser" />
        <RegionsDialog ref="openRef" />
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue';

import type { UploadUserFile, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import CheckTemplate from '/@/components/checkTemplate/index.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import { emergencyPlanApi } from '/@/api/contingencyManagement/emergencyPlan';
import { goalManagementApi } from '/@/api/goalManagement';
import uploaderFile from '/@/components/uploaderFile/index.vue';
export default defineComponent({
    name: 'openAdd',
    components: {
        CheckTemplate,
        DailogSearchUserManger,
        RegionsDialog,
        uploaderFile
    },
    setup(prop, { emit }) {
        const isShowDialog = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const ruleForm = ref({
            name: '', // 预案名称
            type: '', //预案类型
            associatedDanger: '', // 危险源关联
            level: '', // 预案级别
            authorUid: '', // 编写人
            authorName: '',
            authorDeptId: '', // 编写部门
            releaseDate: '', // 发布实施日期
            fileList: [],
            areaList: [], //区域列表
            teamList: [],
            // teamId: '', //应急队伍
            deptList: [],
        });
        const titles = ref();
        const disabled = ref();

        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看应急预案管理' || title == '修改应急预案管理') {
                emergencyPlanApi()
                    .seeEmergencyTeam(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                            ruleForm.value.teamName = ''
                            responsibleDepartment.value = []
                            if(res.data.data.teamList){
                                for(var a = 0;a<res.data.data.teamList.length;a++){
                                    ruleForm.value.teamName+=res.data.data.teamList[a].teamName+';'
                                }
                            }
                            if(res.data.data.deptList){
                                for(var a = 0;a<res.data.data.deptList.length;a++){

                                    responsibleDepartment.value.push(res.data.data.deptList[a].departmentId)
                                }
                            }
                            fileList.value = (res.data.data.fileList?res.data.data.fileList:[])
                            initFileListData()
                        }
                    });
            }
        };
        const initFileListData = async () => {
            for(var a = 0;a<fileList.value.length;a++){
                fileList.value[a].name = fileList.value[a].fileName
            }
        }
        // 上传成功组装数据
        const successUploader = (list) =>{
            fileList.value = list
            const formFileList = []
            for(var a = 0;a<fileList.value.length;a++){
                formFileList.push(
                        {
                            fileName:fileList.value[a].fileName,
                            fileUrl:''
                        }
                )
            }
            ruleForm.value.fileList = formFileList
        }
        //日期选择器
        const releaseDate = ref('');
        // 上传附件
        const fileList = ref([]);
        //el-tree-select回显
        const propse = {
            label: 'depName',
            children: 'children',
        };
        const newTreeList = [];
        //得到部门树
        const department = async () => {
            await goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                        getTreeList(res.data.data, newTreeList);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        // 递归树状数据且修改字段名
        const getTreeList = (treeList, newTreeList) => {
            treeList.map((c) => {
                let tempData = {
                    depName: c.depName,
                    value: c.depId,
                    children: [],
                };
                if (c.children && c.children.length > 0) {
                    tempData.children = [];
                    getTreeList(c.children, tempData.children);
                }
                newTreeList.push(tempData);
            });
        };
        onMounted(() => {
            department();
        });
        const changeDepartment = (e) => {
            var temList = [];
            for (var a = 0; a < e.length; a++) {
                temList.push({
          departmentId: e[a],
                });
            }
            ruleForm.value.deptList = temList;
            console.log(ruleForm);
        };
        //定义树形下拉框
        const responsibleDepartment = ref([]);
        const data = ref();

        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if(!ruleForm.value.fileList){
                ruleForm.value.fileList = []
            }
            if (title == '新建应急预案管理') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        delete ruleForm.value.teamName
                        emergencyPlanApi()
                            .addEmergencyPlan(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            } else if (title == '修改应急预案管理') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        delete ruleForm.value.teamName
                        emergencyPlanApi()
                            .editEmergencyTeam(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
                formEl.resetFields();
                ruleForm.value = {
                    name: '', // 预案名称
                    type: '', //预案类型
                    associatedDanger: '', // 危险源关联
                    level: '', // 预案级别
                    authorUid: '', // 编写人
                    authorName: '',
                    authorDeptId: '', // 编写部门
                    releaseDate: '', // 发布实施日期
                    fileList: [],
                    // teamId: '', //应急队伍ID
                    areaList: [], //区域列表
                    teamList: [],
                    deptList: [],
                };
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
            ruleForm.value = {};
            fileList.value = []
        };
        // 应急队伍弹窗
        const Shows = ref();
        const daiInpt = (data: any) => {
            Shows.value.openDailog(data);
        };
        const SearchUser = (val: any) => {
            let arr = [];
            ruleForm.value.teamList = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].teamName);
                ruleForm.value.teamList.push({
                    teamId: val[i].id,
                });
            }
            ruleForm.value.teamName = arr.toString();
        };
        // 选择区域弹窗
        const openRef = ref();
        const regionsDialog = () => {
            openRef.value.openDailog();
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDailog();
        };
        //回显
        const onUser = (e: any) => {
            ruleForm.value.authorUid = e[0].uid;
            ruleForm.value.authorName = e[0].realName;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            fileList,
            responsibleDepartment,
            data,
            Search,
            releaseDate,
            // treeSelect,
            // trees,
            propse,
            department,
            daiInpt,
            Shows,
            SearchUser,
            submitForm,
            openUser,
            userRef,
            regionsDialog,
            openRef,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disabled,
            emit,
            isShowDialog,
            ruleFormRef,
            ruleForm,
            resetForm,
            onUser,
            newTreeList,
            changeDepartment,
            successUploader,
            initFileListData
        };
    },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/panManagement/component/startUp.vue

@@ -1,160 +0,0 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="30%"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="80px">
        <el-form-item label="备注" >
          <el-input v-model="ruleForm.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">取消</el-button>
          <el-button size="default" type="primary" @click="submitForm(titles,ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';

import type {
  FormInstance,
} from 'element-plus'
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import {emergencyPlanLogApi} from "/@/api/contingencyManagement/emergencyPlanLog";

export default defineComponent({
  name: 'openAdd',
  components: {
  },
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();

    const ruleForm = ref({
      // id: id,
      remark: '',
    })
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    // const openDialog = (title: string ,id: number,) => {
    //   isShowDialog.value = true;
    //   titles.value = title;
    //   if (title == '启动') {
    //     emergencyPlanLogApi()
    //     .seeEmergencyPlanLog(id)
    //     .then((res) => {
    //       if (res.data.code == 200) {
    //         ruleForm.value = res.data.data;
    //       }
    //     });
    //   }
    // };
    const openDialog = (title: string) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '启动') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyPlanLogApi()
                .addEmergencyPlanLog(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
            ruleForm.value = {
              // id: id,
              remark: '',
            }
          } else {
            console.log('error submit!', fields);
          }
        });
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      Search,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      emit,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      submitForm,
      disabled,
      resetForm,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
}
.el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/panManagement/component/upData.vue

@@ -1,125 +0,0 @@
<template>
  <el-dialog
      v-model="dialogVisible"
      title="导入Excel"
      width="50%"
      draggable
      :fullscreen="full"
  >
    <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="3"
        :on-exceed="handleExceed"
    >
      <el-button size="default">下载模板</el-button>
      <el-button size="default" type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          只允许导入“xls”或“xlsx”格式文件！
        </div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts">
import { ref,
  defineComponent,
} from "vue";
import {
  ElMessage,
  ElMessageBox
} from "element-plus";
import type {
  UploadProps,
  UploadUserFile,
} from "element-plus";
import {
  FullScreen
} from '@element-plus/icons-vue'
export default defineComponent({
  setup() {
    let dialogVisible =ref<boolean>(false)
    const fileList = ref<UploadUserFile[]>([
      // {
      //   name: "element-plus-logo.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
      // {
      //   name: "element-plus-logo2.svg",
      //   url: "https://element-plus.org/images/element-plus-logo.svg",
      // },
    ]);

    const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
      console.log(file, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
      console.log(uploadFile);
    };

    const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
      ElMessage.warning(
          `The limit is 3, you selected ${
              files.length
          } files this time, add up to ${
              files.length + uploadFiles.length
          } totally`
      );
    };

    const beforeRemove: UploadProps["beforeRemove"] = (
        uploadFile,
        uploadFiles
    ) => {
      return ElMessageBox.confirm(
          `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
          () => true,
          () => false
      );
    };
    // 打开弹窗
    const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
      dialogVisible.value=true
    }
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      dialogVisible,
      fileList,
      handleRemove,
      handlePreview,
      handleExceed,
      beforeRemove,
      openDialog,
      toggleFullscreen,
      FullScreen,
      full,
    };
  },
});
</script>
<style scoped lang="scss">
.el-upload__tip{
  margin-left: 100px;
  margin-top: 20px;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid #e8e8e8;
}
</style>

 src/views/contingencyManagement/processForm/component/formInformationTop.vue

@@ -1,144 +0,0 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" style="padding: 0 20px">
            <el-tab-pane label="考核指标" name="1">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="70" />
                    <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-input v-model="form.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="检查人" />
                    <el-table-column align="center" prop="address" label="检查时间" />
                </el-table>
                <div class="tiao">
                 <div class="typeS">审批</div>
                </div>
                <el-row style="padding:20px 0">
                    <el-col :span="6" style="text-align:right">一级审批：</el-col>
                    <el-col :span="18">同意</el-col>
                </el-row>
                <el-row style="padding:0 0 20px 0">
                    <el-col :span="6"></el-col>
                    <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
</template>
<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
            const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
            const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const activeName = ref('1');
        return{
            form,
            tableData,
            activeName
        }
    },
})
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0 ;
}
</style>

 src/views/contingencyManagement/processForm/component/formInformationTops.vue

@@ -1,312 +0,0 @@
<template>
    <el-form ref="form" :model="form" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案名称">
                    <el-input v-model="form.name" placeholder="请填写预案名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="适用部门">
          <el-tree-select
              class="select"
              placeholder="请选择"
              v-model="value"
              :data="data"
              :render-after-expand="false"
              show-checkbox
              multiple
              clearable
          />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案类型">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="综合应急预案" value="shanghai" />
            <el-option label="现场处置方案" value="beijing" />
            <el-option label="专项应急预案" value="shanghai" />
            <el-option label="其它预案" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="危险源关联">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="是" value="shanghai" />
            <el-option label="否" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="预案级别">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="公司及" value="shanghai" />
            <el-option label="分厂级" value="beijing" />
            <el-option label="车间级" value="beijing" />
          </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="编写人">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="openUser"/>
            </template>
          </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="编写部门"  placeholder="请选择">
          <el-tree-select
              class="select"
              v-model="value2"
              :data="dataSelect"
              :render-after-expand="false"
              multiple
              check-strictly
              check-on-click-node
              clearable
          />
                </el-form-item>
            </el-col>
      <el-col :span="12">
        <el-form-item label="发布实施日期">
          <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
      </el-col>
        </el-row>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search"/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
        <el-form-item label="预案附件">
          <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :on-change="handleChange"
          >
            <el-button type="primary"
            >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                添加相关附件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="区域名称" prop="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="regionsDialog"/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
  <checkTemplate ref="ShowRef"/>
  <userSelections ref="userRef"/>
  <RegionsDialog ref="openRef"/>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue';
import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from "/@/components/checkTemplate/index.vue"
import RegionsDialog from "/@/components/regionsDialog/index.vue";
export default defineComponent({
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
    setup() {
        const form = reactive({
            name: '',
      value: '',
      value2: '',
      teamLeader: '',

      // data: '',
      // dataSelect: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });

    // 可选择树形选择框
    const value = ref()

    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 树形选择框
    const value2 = ref()

    const dataSelect = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 应急队伍弹窗
    const ShowRef=ref()
    const daiInpt=()=>{
      ShowRef.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开编写人选择用户弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 日期选择
    const datetime = ref('')
        return {
            form,
      value,
      data,
      value2,
      dataSelect,
      openUser,
      userRef,
      Search,
      ShowRef,
      daiInpt,
      openRef,
      datetime,
      regionsDialog,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0;
    position: relative;
}
.typeS {
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor {
    background-color: #67c23a;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns {
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0;
}
.select{
  width: 100%;
}
.select ::v-deep .el-select{
  width: 100%;
}
</style>

 src/views/contingencyManagement/processForm/component/lowerPlate.vue

@@ -1,120 +0,0 @@
<template>
    <div class="box">
        <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="15">
                    <el-form-item label="流程标题">
                        <el-input v-model="form.names" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="下级审批日期">
                        <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                            <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.delivery">
                <el-col :span="15">
                    <el-form-item label="抄送给" prop="resource">
                        <el-input v-model="form.resource" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                        <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.type">
                <el-col :span="15">
                    <el-form-item label="指定" prop="desc">
                        <el-input v-model="form.desc" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <DailogSearchUser ref="ShowUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import { Search } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
    components:{DailogSearchUser},
    setup() {
        const formS=ref<FormInstance>()
        let form = reactive({
            names: '',
            region: '',
            date1: '',
            date2: '',
            delivery: "",
            type: "",
            resource: '',
            desc: '',
        });
        const typeChang=()=>{
         console.log('tag',form)
        }
        const rules = reactive<FormRules>({
  resource: [
    {
      type: 'array',
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ]})
  const ShowUser=ref()
  const openDai =()=>{
   ShowUser.value.openDailog()
  }
        return {
            form,
            rules,
            formS,
            typeChang,
            ShowUser,
            openDai,
            Search,
        };
    },
});
</script>

<style scoped>
.box {
    margin: 30px 0 100px 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
    padding: 20px;
}
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/contingencyManagement/processForm/processForm.vue

@@ -1,137 +0,0 @@
<template>
  <div class="system-user-container">
    <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
    <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#ebeef5"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="1">表单信息</el-menu-item>
        <el-menu-item index="2">流程图</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
        <formInformationTop v-if="false"></formInformationTop>
        <formInformationTops></formInformationTops>
    </div>
    <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
        <div class="title2">流程图</div>
        <div style="width:100%;height:400px"></div>
    </div>
    </div>
    <lowerPlate></lowerPlate>
    <div class="btns">
        <el-button type="primary">启动</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import formInformationTop from './component/formInformationTop.vue'
import formInformationTops from './component/formInformationTops.vue'
import lowerPlate from './component/lowerPlate.vue'
export default defineComponent({
    components:{lowerPlate,formInformationTop,formInformationTops},
    setup() {
        const activeIndex = ref('1');
        const handleSelect = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath);
            activeIndex.value = key;
        };
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
	
        const router=useRouter()
        const Type=onMounted(()=>{
            // console.log("xxxxxxx",router)
        })
		
        return {
            activeIndex,
            handleSelect,
            form,
            router,
            Type
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
  padding: 15px;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}

/*弹窗底部边框线*/
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
}
/*弹窗顶部边框线*/
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
}
</style>

 src/views/facilityManagement/EquipmentStatistics/index.vue

@@ -1,101 +0,0 @@
<template>
    <div class="box">
        <div class="title">设备设施统计</div>
        <div ref="main" style="width: 100%; height: 400px"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
export default defineComponent({
    setup() {
        const listApi = () => {
            facilityManagementApi()
                .getequipmentInfoStatistics()
                .then((res) => {
                    if (res.data.code == 200) {
                        let arr = [];
                        arr = res.data.data;
                        let date = [];
                        for (let i = 0; i < arr.length; i++) {
                            if (arr[i].stopStatus == 1) {
                                date[0] = arr[i].count;
                            } else if (arr[i].stopStatus == 2) {
                                date[1] = arr[i].count;
                            }else if (arr[i].stopStatus == 3) {
                                date[2] = arr[i].count;
                            }else if (arr[i].stopStatus == 4) {
                                date[3] = arr[i].count;
                            }else if (arr[i].stopStatus == -1) {
                                date[4] = arr[i].count;
                            }
                        }
                        init(date);
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        onMounted(() => {
            listApi();
        });
        const main = ref();
        const init = (data: any) => {
            var myChart = echarts.init(main.value);
            var option = {
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['停用 ', '在用', '维修 ', '报废', '超时未保养'],
                },
                yAxis: {
                    type: 'value',
                    name: '数量',
                    nameTextStyle: {
                        color: '#aaa',
                        nameLocation: 'start',
                    },
                },
                color: ['#6394f9'],
                series: [
                    {
                        data: data,
                        type: 'bar',
                    },
                ],
            };

            myChart.setOption(option);
        };
        return {
            init,
            onMounted,
            main,
            listApi,
        };
    },
});
</script>
<style scoped>
.box {
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.title {
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding: 20px;
}
</style>

 src/views/facilityManagement/InstrumentationInformation/index.vue

@@ -1,391 +0,0 @@
<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.searchParams.qName" 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>
        <el-row>
            <el-col :span="4">
                <el-input v-model="filterText" style="height: 30px" placeholder="请输入关键字" />
                <div class="tree">
                    <!-- <el-tree ref="treeRef" class="filter-tree" :data="data" :props="props" :filter-node-method="filterNode" /> -->
                    <el-tree ref="treeRef" :data="data" :props="props" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                </div>
            </el-col>
            <el-col :span="20">
                <div class="btns">
                    <div>
                        <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                         <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen"
                                    @click="openD('修改', deletAll[0])">修改</el-button>
                        <el-button size="default" :disabled="danger" type="danger" :icon="Delete" @click="onDeleteAll" plain>删除</el-button>
                    </div>
                    <div>
                        <!-- <el-button size="default" :icon="Upload" @click="openUp"></el-button>
                        <el-button size="default" :icon="Download"></el-button>
                        <el-button size="default" :icon="Refresh"></el-button> -->
                    </div>
                </div>
                <div style="padding-left: 10px">
                    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" align="center" width="55" />
                        <el-table-column type="expand">
                            <template #default="scope">
                                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClicks" style="margin: 0 5%">
                                    <el-tab-pane label="设备保养" name="first">
                                        <el-table ref="multipleTableRef" :data="scope.row.takecareDetailList" style="width: 100%">
                                            <el-table-column property="takecareMemo" align="center" label="保养情况" sortable />
                                            <el-table-column property="leadingPersonName" align="center" label="保养负责人" sortable />
                                            <el-table-column property="takecareDate" align="center" :formatter="timeDate" label="保养日期" sortable />
                                            <el-table-column property="leadingPersonDepartmentName" align="center" label="保养负责人单位" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备检查" name="second"
                                        ><el-table ref="multipleTableRef" :data="scope.row.checkDetailList" style="width: 100%">
                                            <el-table-column property="leadingPersonName" align="center" label="检查人" sortable />
                                            <el-table-column property="createTime" align="center" :formatter="timeDate" label="检查日期" sortable />
                                            <el-table-column property="name" align="center" label="检查人部门" sortable />
                                            <el-table-column property="takecareMemo" align="center" label="检查结果" sortable />
                                            <el-table-column property="name" align="center" label="检查状态" sortable /> </el-table
                                    ></el-tab-pane>
                                    <el-tab-pane label="设备检测" name="third">
                                        <el-table ref="multipleTableRef" :data="scope.row.testDetailList" style="width: 100%">
                                            <el-table-column property="testPersonName" align="center" label="检测人" sortable />
                                            <el-table-column property="testDate" align="center" :formatter="timeDate" label="检测日期" sortable />
                                            <el-table-column property="testPersonDepartmentName" align="center" label="检测人单位" sortable />
                                            <el-table-column property="testMemo" align="center" label="检测内容" sortable />
                                            <el-table-column align="center" label="检测结果">
                                                <template #default="scope">
                                                    <span v-if="scope.row.testResult == 1">成功</span>
                                                    <span v-if="scope.row.testResult == 2">失败</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="testStatus" align="center" label="检测状态" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备维修" name="fourth">
                                        <el-table ref="multipleTableRef" :data="scope.row.repaireDetailList" style="width: 100%">
                                            <el-table-column property="exceptionInfo" align="center" label="设施异常项" sortable />
                                            <el-table-column align="center" label="维修状态">
                                                <template #default="scope">
                                                    <span v-if="scope.row.repairStatus == 1">维修中</span>
                                                    <span v-if="scope.row.repairStatus == 2">已修好</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="repairMemo" align="center" label="维修情况" sortable />
                                            <el-table-column property="repairPersonName" align="center" label="维修负责人" sortable />
                                            <el-table-column property="repairPersonDepartmentName" align="center" label="维修负责人单位" sortable />
                                            <el-table-column property="repairStartDate" align="center" :formatter="timeDate" label="维修开始日期" sortable />
                                            <el-table-column property="repairEndDate" align="center" :formatter="timeDate" label="维修结束日期" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-table-column>
                        <el-table-column property="qName" label="装置设施名称" align="center" sortable />
                        <el-table-column property="positionNum" align="center" label="装置设施位号" sortable />
                        <el-table-column property="qUsage" align="center" label="装置设施用途" sortable />
                        <el-table-column property="model" label="装置设施型号" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="equipmentTypeId" label="类型/类别外键" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="setPart" label="设施部位" align="center" sortable show-overflow-tooltip />
                        <el-table-column label="操作" align="center" width="250">
                            <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="EditPen" @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>
                </div>
            </el-col>
        </el-row>
        <!-- <updata ref="Show"></updata> -->
        <Dailog ref="openAdd" @navAddorUpdata="onAddorUpdata"></Dailog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import { timeDate } from '/@/assets/index.ts';
import updata from '/@/components/updata/updata.vue';
import Dailog from '/@/components/equipmentDailog/Dailog.vue';
import { ElTree, TabsPaneContext, ElMessage, ElMessageBox } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { EditPen, View, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    components: { updata, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////名称
                positionNum: '', ////位号
                equipmentTypeId: '',
                infoType: 0, ////具体类型（页面左侧的导航栏使用） 0:仪器仪表信息 1：生产设备设施 2：安全设备设施
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.positionNum = '';
            ruleForm.searchParams.equipmentTypeId = '';
            listApiTree()
            listApi();
        };
        const listApi = () => {
            facilityManagementApi()
                .getequipmentInfoList(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 onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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.openDailog(title, false, id, 0);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(arr)
                        .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;
            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(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(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 filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        // 树形
        const listApiTree = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        const props = {
            label: 'typeName',
            children: 'childList',
            value: 'id',
        };
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });

        const filterNode = (value: string, data: Tree) => {
            if (!value) return true;
            return data.typeName.includes(value);
        };
        const handleNodeClick = (data: Tree) => {
            ruleForm.searchParams.positionNum = data.sortNum;
            ruleForm.searchParams.equipmentTypeId = data.id;
            listApi();
        };
        const data = ref([]);
        onMounted(() => {
            listApiTree();
        });
        const handleClicks = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };

        const activeName = ref('first');
        // const Show=ref()
        // const openUp=()=>{
        //     Show.value.openDialog()
        // }
        return {
            handleNodeClick,
            ruleForm,
            timeDate,
            resetForm,
            listApi,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            listApiTree,
            handleClicks,
            filterText,
            treeRef,
            props,
            filterNode,
            data,
            openAdd,
            openD,
            activeName,
            Plus,
            EditPen,
            Delete,
            Download,
            Refresh,
            View,
            Upload,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.tree {
    height: 750px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
}
.btns {
    padding: 10px 0px 10px 10px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}
</style>

 src/views/facilityManagement/ProductionEquipment/index.vue

@@ -1,390 +0,0 @@
<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.searchParams.qName" 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>
        <el-row>
            <el-col :span="4">
            <el-input v-model="filterText" style="height: 30px" placeholder="请输入关键字" />
                <div class="tree">
					
                    <!-- <el-tree ref="treeRef" class="filter-tree" :data="data" :props="props" :filter-node-method="filterNode" /> -->
                    <el-tree ref="treeRef" :data="data" :props="props" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                </div>
            </el-col>
            <el-col :span="20">
                <div class="btns">
                    <div>
                        <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                         <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen"
                                    @click="openD('修改', deletAll[0])">修改</el-button>
                        <el-button size="default" :disabled="danger" type="danger" :icon="Delete" @click="onDeleteAll" plain>删除</el-button>
                    </div>
                    <div>
                        <!-- <el-button size="default" :icon="Upload" @click="openUp"></el-button>
                        <el-button size="default" :icon="Download"></el-button>
                        <el-button size="default" :icon="Refresh"></el-button> -->
                    </div>
                </div>
                <div style="padding-left: 10px">
                    <el-table ref="multipleTableRef" :data="tableData"  @selection-change="handleSelectionChange" style="width: 100%">
                        <el-table-column type="selection" align="center" width="55" />
                        <el-table-column type="expand">
                            <template #default="scope">
                                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClicks" style="margin: 0 5%">
                                    <el-tab-pane label="设备保养" name="first">
                                        <el-table ref="multipleTableRef" :data="scope.row.takecareDetailList" style="width: 100%">
                                            <el-table-column property="takecareMemo" align="center" label="保养情况" sortable />
                                            <el-table-column property="leadingPersonName" align="center" label="保养负责人" sortable />
                                            <el-table-column property="takecareDate" align="center" label="保养日期" sortable />
                                            <el-table-column property="leadingPersonDepartmentName" align="center" label="保养负责人单位" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备检查" name="second"
                                        ><el-table ref="multipleTableRef" :data="scope.row.checkDetailList" style="width: 100%">
                                            <el-table-column property="leadingPersonName" align="center" label="检查人" sortable />
                                            <el-table-column property="createTime" align="center" label="检查日期" sortable />
                                            <el-table-column property="name" align="center" label="检查人部门" sortable />
                                            <el-table-column property="takecareMemo" align="center" label="检查结果" sortable />
                                            <el-table-column property="name" align="center" label="检查状态" sortable /> </el-table
                                    ></el-tab-pane>
                                    <el-tab-pane label="设备检测" name="third">
                                        <el-table ref="multipleTableRef" :data="scope.row.testDetailList" style="width: 100%">
                                            <el-table-column property="testPersonName" align="center" label="检测人" sortable />
                                            <el-table-column property="testDate" align="center" label="检测日期" sortable />
                                            <el-table-column property="testPersonDepartmentName" align="center" label="检测人单位" sortable />
                                            <el-table-column property="testMemo" align="center" label="检测内容" sortable />
                                            <el-table-column align="center" label="检测结果">
                                                <template #default="scope">
                                                    <span v-if="scope.row.testResult == 1">成功</span>
                                                    <span v-if="scope.row.testResult == 2">失败</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="testStatus" align="center" label="检测状态" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备维修" name="fourth">
                                        <el-table ref="multipleTableRef" :data="scope.row.repaireDetailList" style="width: 100%">
                                            <el-table-column property="exceptionInfo" align="center" label="设施异常项" sortable />
                                            <el-table-column align="center" label="维修状态">
                                                <template #default="scope">
                                                    <span v-if="scope.row.repairStatus == 1">维修中</span>
                                                    <span v-if="scope.row.repairStatus == 2">已修好</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="repairMemo" align="center" label="维修情况" sortable />
                                            <el-table-column property="repairPersonName" align="center" label="维修负责人" sortable />
                                            <el-table-column property="repairPersonDepartmentName" align="center" label="维修负责人单位" sortable />
                                            <el-table-column property="repairStartDate" align="center" label="维修开始日期" sortable />
                                            <el-table-column property="repairEndDate" align="center" label="维修结束日期" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-table-column>
                        <el-table-column property="qName" label="装置设施名称" align="center" sortable />
                        <el-table-column property="positionNum" align="center" label="装置设施位号" sortable />
                        <el-table-column property="qUsage" align="center" label="装置设施用途" sortable />
                        <el-table-column property="model" label="装置设施型号" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="equipmentTypeId" label="类型/类别外键" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="setPart" label="设施部位" align="center" sortable show-overflow-tooltip />
                        <el-table-column label="操作" align="center" width="250">
                            <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="EditPen" @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>
                </div>
            </el-col>
        </el-row>
        <!-- <updata ref="Show"></updata> -->
        <Dailog ref="openAdd" @navAddorUpdata="onAddorUpdata"></Dailog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import updata from '/@/components/updata/updata.vue';
import Dailog from '/@/components/equipmentDailog/Dailog.vue';
import { ElTree, TabsPaneContext, ElMessage, ElMessageBox } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { EditPen, View, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    components: { updata, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////名称
                positionNum: '', ////位号
                equipmentTypeId:"",
                infoType: 1, ////具体类型（页面左侧的导航栏使用） 0:仪器仪表信息 1：生产设备设施 2：安全设备设施
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.positionNum = '';
            ruleForm.searchParams.equipmentTypeId = '';
            listApiTree()
            listApi();
        };
        const listApi = () => {
            facilityManagementApi()
                .getequipmentInfoList(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 onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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.openDailog(title,true,id,1);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(arr)
                        .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
            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(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(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 filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        // 树形
        const listApiTree = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value= res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        const props = {
            label: 'typeName',
            children: 'childList',
            value: 'id',
        }
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });

        const filterNode = (value: string, data: Tree) => {
            if (!value) return true;
            return data.typeName.includes(value);
        };
       const handleNodeClick=(data: Tree)=>{
            ruleForm.searchParams.equipmentTypeId=data.id
            ruleForm.searchParams.equipmentTypeId = data.id;
            listApi();
       }
        const data=ref([])
        onMounted(() => {
            listApiTree();
        });
        const handleClicks = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };
		
        const activeName = ref('first');
        // const Show=ref()
        // const openUp=()=>{
        //     Show.value.openDialog()
        // }
        return {
            handleNodeClick,
            ruleForm,
            resetForm,
            listApi,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            listApiTree,
            handleClicks,
            filterText,
            treeRef,
            props,
            filterNode,
            data,
            openAdd,
            openD,
            activeName,
            Plus,
            EditPen,
            Delete,
            Download,
            Refresh,
            View,
            Upload,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.tree {
    height: 750px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
}
.btns {
    padding: 10px 0px 10px 10px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}
</style>

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

@@ -1,198 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" @close="resetForm(ruleFormRef)" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <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" prop="isContent">
                        <el-select v-model="form.isContent" placeholder="请选择" style="width: 100%">
                            <el-option label="是" :value="1" />
                            <el-option label="否" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="父级编号" size="default" prop="parentId">
                        <el-tree-select clearable check-strictly="true" v-model="form.parentId" :data="data" :props="propst" class="w100" placeholder="请选择" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="类别名称" size="default" prop="typeName">
                        <el-input v-model="form.typeName" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="排列序列" size="default" prop="sortNum">
                        <el-input v-model.number="form.sortNum" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">关闭</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { FullScreen } from '@element-plus/icons-vue';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { ElMessage } from 'element-plus';
import { type } from 'os';
export default defineComponent({
    setup(prpos, { emit }) {
        const dialogVisible = ref(false);
        const form = ref({
            isContent: '', ////是否为设备内容  1：是 2：否
            typeName: '', ////类别名称
            parentId: '', ////父级ID，如果没有父级，为0
            isCheck: 0, ////是否检测  1：是 2：否
            isVisit: 0, ////是否巡检 1：是 2：否
            sortNum: '', //排列序列
            // id: '', //设备类型ID ，更新时必填
        });
        const titles = ref();
        const titleT = ref();
        const disabled = ref(false);
        const openDailog = (title: string, id: number) => {
            listApi();
            titleT.value = title;
            dialogVisible.value = true;
            titles.value = `${title}设备设施类型管理`;
            if (title == '查看') {
                disabled.value = true;
                detail(id);
            } else if (title == '修改') {
                detail(id);
            } else if (title == '添加') {
                form.value.parentId = id;
            }
        };
        const detail = (id: number) => {
            facilityManagementApi()
                .getequipmentTypeMngDetail(id)
                .then((res) => {
                    if (res.data.code == 200) {
                        form.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        // 列表
        const listApi = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        const data = ref([]);
        const propst = {
            label: 'typeName',
            children: 'childList',
            value: 'id',
        };
        const ruleFormRef = ref<FormInstance>();
        const rules = reactive<FormRules>({
            isContent: [{ required: true, message: '是否为设备内容不能为空', trigger: 'change' }],
            parentId: [],
            typeName: [{ required: true, message: '类别名称不能为空', trigger: 'change' }],
            sortNum: [
                { required: true, message: '排列序列不能为空', trigger: 'change' },
                { type: 'number', message: '请输入数字!', trigger: 'change' },
            ],
        });
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    if (titleT.value == '新建') {
                        delete form.value.id;
                    }
                    facilityManagementApi()
                        .getequipmentTypeMngAddOrUpdate(form.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                dialogVisible.value = false;
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                emit('onAdd');
                                formEl.resetFields();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                            }
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
            disabled.value=false
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.resetFields();
            dialogVisible.value = false;
            disabled.value=false
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            titleT,
            detail,
            rules,
            ruleFormRef,
            listApi,
            propst,
            submitForm,
            resetForm,
            data,
            disabled,
            dialogVisible,
            form,
            titles,
            openDailog,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/facilityManagement/deviceType/index.vue

@@ -1,130 +0,0 @@
<template>
    <div class="box">
        <el-button type="primary" :icon="Plus" @click="openD('新建', 0)" size="default">新建</el-button>
        <el-table :data="tableData" style="width: 100%" row-key="id" :tree-props="propse">
            <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 == 0">-</span>
                    <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 == 0">-</span>
                    <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="scope">
                    <el-button type="primary" link :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                    <el-button type="primary" link :icon="EditPen" @click="openD('修改', scope.row.id)">修改</el-button>
                    <el-button type="primary" link :icon="Delete" @click="Deletes(scope.row.id)">删除</el-button>
                    <el-button type="primary" link :icon="CirclePlus" @click="openD('添加', scope.row.id)">添加下级设备设施类型管理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Dailog ref="Show" @onAdd="add"></Dailog>
    </div>
</template>
<script lang="ts">
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,ElMessageBox } from 'element-plus';
export default defineComponent({
    components: { Dailog },
    setup() {
        // 列表
        const listApi = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        onMounted(() => {
            listApi();
        });
        // 删除
        const Deletes = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    facilityManagementApi()
                        .getequipmentTypeMngDelete(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        const add = () => {
            listApi();
        };
        const tableData = ref();
        const propse = {
            children: 'childList',
        };
        const Show = ref();
        const openD = (title: string, id: number) => {
            Show.value.openDailog(title, id);
        };
        return {
            propse,
            add,
            tableData,
            Show,
            Deletes,
            openD,
            listApi,
            Plus,
            View,
            EditPen,
            CirclePlus,
            Delete,
        };
    },
});
</script>
<style scoped>
.box {
    padding: 20px;
    background-color: #fff;
}
</style>

 src/views/facilityManagement/keyEquipment/index.vue

@@ -1,449 +0,0 @@
<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.searchParams.name" 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>
        <el-row>
            <el-col :span="4">
                <el-input v-model="filterText" style="height: 30px" placeholder="请输入关键字"/>
                <div class="tree">
                    <!--                    <el-input v-model="filterText" style="height: 30px" placeholder="Filter keyword" />-->
                    <el-tree ref="treeRef" :data="data" :props="props" @node-click="handleNodeClick"
                             :filter-node-method="filterNode"/>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="btns">
                    <div>
                        <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                        <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen"
                                   @click="openD('修改', deletAll[0])">修改</el-button>
                        <el-button size="default" :disabled="danger" type="danger" :icon="Delete" @click="onDeleteAll"
                                   plain>删除
                        </el-button>
                    </div>
                    <div>
                        <!-- <el-button size="default" :icon="Upload" @click="openUp"></el-button>
                        <el-button size="default" :icon="Download"></el-button>
                        <el-button size="default" :icon="Refresh"></el-button> -->
                    </div>
                </div>
                <div style="padding-left: 10px">
                    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
                              style="width: 100%">
                        <el-table-column type="selection" align="center" width="55"/>
                        <el-table-column type="expand">
                            <template #default="scope">
                                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"
                                         style="margin: 0 5%">
                                    <el-tab-pane label="设备保养" name="first">
                                        <el-table ref="multipleTableRef" :data="scope.row.takecareDetailList"
                                                  style="width: 100%">
                                            <el-table-column property="takecareMemo" align="center" label="保养情况"
                                                             sortable/>
                                            <el-table-column property="leadingPersonName" align="center" label="保养负责人"
                                                             sortable/>
                                            <el-table-column property="takecareDate" align="center"
                                                             :formatter="timeDate" label="保养日期" sortable/>
                                            <el-table-column property="leadingPersonDepartmentName" align="center"
                                                             label="保养负责人单位" sortable/>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备检查" name="second"
                                    >
                                        <el-table ref="multipleTableRef" :data="scope.row.checkDetailList"
                                                  style="width: 100%">
                                            <el-table-column property="testPersonName" align="center" label="检查人"
                                                             sortable/>
                                            <el-table-column property="testDate" align="center" :formatter="timeDate"
                                                             label="检查日期" sortable/>
                                            <el-table-column property="testPersonDepartmentName" align="center" label="检查人部门" sortable/>
                                            <el-table-column property="testResult" align="center" label="检查结果"
                                                             sortable>
                                                <template #default="scope">
                                                    <span v-if="scope.row.testResult == 1">成功</span>
                                                    <span v-if="scope.row.testResult == 2">失败</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="testStatus" align="center" label="检查状态" sortable/>
                                        </el-table
                                        >
                                    </el-tab-pane>
                                    <el-tab-pane label="设备检测" name="third">
                                        <el-table ref="multipleTableRef" :data="scope.row.testDetailList"
                                                  style="width: 100%">
                                            <el-table-column property="repairPersonName" align="center" label="检测人"
                                                             sortable/>
                                            <el-table-column property="repairStarDate" align="center" :formatter="timeDate"
                                                             label="检测日期" sortable/>
                                            <el-table-column property="repairPersonDepartmentName" align="center"
                                                             label="检测人单位" sortable/>
                                            <el-table-column property="testMemo" align="center" label="检测内容" sortable/>
                                            <el-table-column property="testResult" align="center" label="检测结果"
                                                             sortable/>
                                            <el-table-column property="testStatus" align="center" label="检测状态"
                                                             sortable/>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备维修" name="fourth">
                                        <el-table ref="multipleTableRef" :data="scope.row.repaireDetailList"
                                                  style="width: 100%">
                                            <el-table-column property="exceptionInfo" align="center" label="设施异常项"
                                                             sortable/>
                                            <el-table-column property="repairStatus" align="center" label="维修状态"
                                                             sortable>
                                                <template #default="scope">
                                                    <span v-if="scope.row.repairStatus == 1">维修中</span>
                                                    <span v-if="scope.row.repairStatus == 2">已维修</span>
                                                </template>

                                            </el-table-column>
                                            <el-table-column property="repairMemo" align="center" label="维修情况"
                                                             sortable/>
                                            <el-table-column property="repairPersonName" align="center" label="维修负责人"
                                                             sortable/>
                                            <el-table-column property="repairPersonDepartmentName" align="center"
                                                             label="维修负责人单位" sortable/>
                                            <el-table-column property="repairStartDate" align="center"
                                                             :formatter="timeDate" label="维修开始日期" sortable/>
                                            <el-table-column property="repairEndDate" align="center"
                                                             :formatter="timeDate" label="维修结束日期" sortable/>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-table-column>
                        <el-table-column property="equipmentTypeName" align="center" label="类型/类别外键" sortable/>
                        <el-table-column property="name" align="center" label="装置/部位名称" sortable/>
                        <el-table-column property="departmentName" label="所属部门" align="center" sortable
                                         show-overflow-tooltip/>
                        <el-table-column property="position" label="具体位置" align="center" sortable
                                         show-overflow-tooltip/>
                        <el-table-column property="leadingPersonName" label="负责人姓名" align="center" sortable
                                         show-overflow-tooltip/>
                        <el-table-column property="partType" label="装置部位分类" align="center" sortable
                                         show-overflow-tooltip>
                            <template #default="scope">
                                <span v-if="scope.row.partType == 1">关键装置</span>
                                <span v-if="scope.row.partType == 2">重点部位</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="250">
                            <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="EditPen"
                                           @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>
                </div>
            </el-col>
        </el-row>
        <!--        <updata ref="Show"></updata>-->
        <DailogS ref="ShowD" @navAddorUpdata="onAddorUpdata"></DailogS>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref, reactive, watch, onMounted} from 'vue';
    // import updata from '/@/components/updata/updata.vue'
    import DailogS from '/@/components/equipmentDailog/DailogS.vue';
    import {ElTree, TabsPaneContext, ElMessage, ElMessageBox} from 'element-plus';
    import {EditPen, Plus, Delete, Download, Refresh, Upload, View} from '@element-plus/icons-vue';
    import {facilityManagementApi} from '/@/api/facilityManagement';
    import {timeDate} from '/@/assets/index.ts'

    interface Tree {
        label: string;
        children?: Tree[];
    }

    export default defineComponent({
        components: {
            // updata,
            DailogS,
        },
        setup() {
            const ruleForm = reactive({
                pageSize: 10,
                pageIndex: 1,
                searchParams: {
                    // equipmentTypeId: '', ////类型/类别外键
                    name: '', ////装置/部位名称
                    // departmentId: '',////所属部门
                    // position: '', ////具体位置
                    // leadingPersonName: '', ////负责人姓名
                    // connectPersonId: '',////装置部位分类
                    // infoTpe: 0, ////具体类型（页面左侧的导航栏使用） 0:仪器仪表信息 1：生产设备设施 2：安全设备设施  3:重点监管装置/设备
                    equipmentTypeId: ''
                },
            });
            // 重置
            const resetForm = () => {
                ruleForm.searchParams.equipmentTypeId = '';
                listApi();
            };
            const listApi = () => {
                // delete ruleForm.qName
                facilityManagementApi()
                    .getkeypointEquipmentInfoAddOrList(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 onAddorUpdata = () => {
                listApi();
            };
            const tableData = ref();
            const currentPage4 = ref();
            const pageSize4 = ref();
            const total = ref();
            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 filterText = ref('');
            const treeRef = ref<InstanceType<typeof ElTree>>();
            // 树形
            const listApiTree = () => {
                facilityManagementApi()
                    .getequipmentTypeMngTreeData()
                    .then((res) => {
                        if (res.data.code == 200) {
                            console.log(res.data.data);
                            data.value = res.data.data;
                        } else {
                            ElMessage({
                                showClose: true,
                                message: res.data.msg,
                                type: 'error',
                            });
                        }
                    });
            };
            const props = {
                label: 'typeName',
                children: 'childList',
                value: 'id',
            }
            watch(filterText, (val) => {
                treeRef.value!.filter(val);
            });
            const filterNode = (value: string, data: Tree) => {
                if (!value) return true;
                return data.typeName.includes(value);
            };
            const handleNodeClick = (data: Tree) => {
                console.log(data)
                ruleForm.searchParams.equipmentTypeId = data.id;

                listApi();
            };
            const data = ref([]);
            onMounted(() => {
                listApiTree();
            });
            // 删除
            const onDelete = (id: number) => {
                let arr = []
                arr.push(id)
                ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        facilityManagementApi()
                            .getkeypointEquipmentInfoDetele(arr)
                            .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;
                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(() => {
                        facilityManagementApi()
                            .getkeypointEquipmentInfoDetele(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 activeName = ref('first');

            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event);
            };
            // const Show=ref()
            // const openUp=()=>{
            //     Show.value.openDialog()
            // }
            // 新增弹窗
            const ShowD = ref();
            const openD = (title: String, id: number) => {
                ShowD.value.openDailog(title, false, id, 2);
            };
            return {
                activeName,
                handleClick,
                ruleForm,
                filterText,
                treeRef,
                props,
                filterNode,
                data,
                tableData,
                // Show,
                // openUp,
                ShowD,
                danger,
                openD,
                // openEdit,
                Plus,
                EditPen,
                listApiTree,
                Delete,
                View,
                Download,
                Refresh,
                Upload,
                resetForm,
                listApi,
                handleCurrentChange,
                handleSizeChange,
                onAddorUpdata,
                total,
                currentPage4,
                pageSize4,
                onDelete,
                // warning,
                handleSelectionChange,
                onDeleteAll,
                handleNodeClick,
                timeDate,
                deletAll
            };
        },
    });
</script>
<style scoped>
    .topTitle {
        background-color: #fff;
        padding: 20px 0px 20px 0px;
        margin-bottom: 10px;
    }

    .tree {
        height: 750px;
        background-color: #fff;
        overflow: hidden;
        overflow-y: auto;
    }

    .btns {
        padding: 10px 0px 10px 10px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
    }
</style>

 src/views/facilityManagement/safetyEquipment/index.vue

@@ -1,391 +0,0 @@
<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.searchParams.qName" 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>
        <el-row>
            <el-col :span="4">
                <el-input v-model="filterText" style="height: 30px" placeholder="请输入关键字" />
                <div class="tree">
                    <!-- <el-tree ref="treeRef" class="filter-tree" :data="data" :props="props" :filter-node-method="filterNode" /> -->
                    <el-tree ref="treeRef" :data="data" :props="props" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                </div>
            </el-col>
            <el-col :span="20">
                <div class="btns">
                    <div>
                        <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                         <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen"
                                    @click="openD('修改', deletAll[0])">修改</el-button>
                        <el-button size="default" :disabled="danger" type="danger" :icon="Delete" @click="onDeleteAll" plain>删除</el-button>
                    </div>
                    <div>
                        <!-- <el-button size="default" :icon="Upload" @click="openUp"></el-button>
                        <el-button size="default" :icon="Download"></el-button>
                        <el-button size="default" :icon="Refresh"></el-button> -->
                    </div>
                </div>
                <div style="padding-left: 10px">
                    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                        <el-table-column type="selection" align="center" width="55" />
                        <el-table-column type="expand">
                            <template #default="scope">
                                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClicks" style="margin: 0 5%">
                                    <el-tab-pane label="设备保养" name="first">
                                        <el-table ref="multipleTableRef" :data="scope.row.takecareDetailList" style="width: 100%">
                                            <el-table-column property="takecareMemo" align="center" label="保养情况" sortable />
                                            <el-table-column property="leadingPersonName" align="center" label="保养负责人" sortable />
                                            <el-table-column property="takecareDate" align="center" :formatter="timeDate" label="保养日期" sortable />
                                            <el-table-column property="leadingPersonDepartmentName" align="center" label="保养负责人单位" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备检查" name="second"
                                        ><el-table ref="multipleTableRef" :data="scope.row.checkDetailList" style="width: 100%">
                                            <el-table-column property="leadingPersonName" align="center" label="检查人" sortable />
                                            <el-table-column property="createTime" align="center" :formatter="timeDate" label="检查日期" sortable />
                                            <el-table-column property="name" align="center" label="检查人部门" sortable />
                                            <el-table-column property="takecareMemo" align="center" label="检查结果" sortable />
                                            <el-table-column property="name" align="center" label="检查状态" sortable /> </el-table
                                    ></el-tab-pane>
                                    <el-tab-pane label="设备检测" name="third">
                                        <el-table ref="multipleTableRef" :data="scope.row.testDetailList" style="width: 100%">
                                            <el-table-column property="testPersonName" align="center" label="检测人" sortable />
                                            <el-table-column property="testDate" align="center" :formatter="timeDate" label="检测日期" sortable />
                                            <el-table-column property="testPersonDepartmentName" align="center" label="检测人单位" sortable />
                                            <el-table-column property="testMemo" align="center" label="检测内容" sortable />
                                            <el-table-column align="center" label="检测结果">
                                                <template #default="scope">
                                                    <span v-if="scope.row.testResult == 1">成功</span>
                                                    <span v-if="scope.row.testResult == 2">失败</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="testStatus" align="center" label="检测状态" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="设备维修" name="fourth">
                                        <el-table ref="multipleTableRef" :data="scope.row.repaireDetailList" style="width: 100%">
                                            <el-table-column property="exceptionInfo" align="center" label="设施异常项" sortable />
                                            <el-table-column align="center" label="维修状态">
                                                <template #default="scope">
                                                    <span v-if="scope.row.repairStatus == 1">维修中</span>
                                                    <span v-if="scope.row.repairStatus == 2">已修好</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column property="repairMemo" align="center" label="维修情况" sortable />
                                            <el-table-column property="repairPersonName" align="center" label="维修负责人" sortable />
                                            <el-table-column property="repairPersonDepartmentName" align="center" label="维修负责人单位" sortable />
                                            <el-table-column property="repairStartDate" align="center" :formatter="timeDate" label="维修开始日期" sortable />
                                            <el-table-column property="repairEndDate" align="center" :formatter="timeDate" label="维修结束日期" sortable />
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-table-column>
                        <el-table-column property="qName" label="装置设施名称" align="center" sortable />
                        <el-table-column property="positionNum" align="center" label="装置设施位号" sortable />
                        <el-table-column property="qUsage" align="center" label="装置设施用途" sortable />
                        <el-table-column property="model" label="装置设施型号" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="equipmentTypeId" label="类型/类别外键" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="setPart" label="设施部位" align="center" sortable show-overflow-tooltip />
                        <el-table-column label="操作" align="center" width="250">
                            <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="EditPen" @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>
                </div>
            </el-col>
        </el-row>
        <!-- <updata ref="Show"></updata> -->
        <Dailog ref="openAdd" @navAddorUpdata="onAddorUpdata"></Dailog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import updata from '/@/components/updata/updata.vue';
import Dailog from '/@/components/equipmentDailog/Dailog.vue';
import { ElTree, TabsPaneContext, ElMessage, ElMessageBox } from 'element-plus';
import { facilityManagementApi } from '/@/api/facilityManagement';
import { timeDate } from '/@/assets/index.ts';
import { EditPen, View, Plus, Delete, Download, Refresh, Upload } from '@element-plus/icons-vue';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    components: { updata, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////名称
                positionNum: '', ////位号
                equipmentTypeId: '',
                infoType: 2, ////具体类型（页面左侧的导航栏使用） 0:仪器仪表信息 1：生产设备设施 2：安全设备设施
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.positionNum = '';
            ruleForm.searchParams.equipmentTypeId = '';
            listApiTree()
            listApi();
        };
        const listApi = () => {
            facilityManagementApi()
                .getequipmentInfoList(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 onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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.openDailog(title, false, id, 2);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(arr)
                        .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;
            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(() => {
                    facilityManagementApi()
                        .getequipmentInfoDelete(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 filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        // 树形
        const listApiTree = () => {
            facilityManagementApi()
                .getequipmentTypeMngTreeData()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error',
                        });
                    }
                });
        };
        const props = {
            label: 'typeName',
            children: 'childList',
            value: 'id',
        };
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });

        const filterNode = (value: string, data: Tree) => {
            if (!value) return true;
            return data.typeName.includes(value);
        };
        const handleNodeClick = (data: Tree) => {
            ruleForm.searchParams.equipmentTypeId = data.id;
            ruleForm.searchParams.equipmentTypeId = data.id;
            listApi();
        };
        const data = ref([]);
        onMounted(() => {
            listApiTree();
        });
        const handleClicks = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };

        const activeName = ref('first');
        // const Show=ref()
        // const openUp=()=>{
        //     Show.value.openDialog()
        // }
        return {
            handleNodeClick,
            ruleForm,
            resetForm,
            listApi,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            listApiTree,
            handleClicks,
            filterText,
            treeRef,
            props,
            filterNode,
            data,
            openAdd,
            openD,
            activeName,
            Plus,
            EditPen,
            Delete,
            Download,
            Refresh,
            View,
            Upload,
            timeDate,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.tree {
    height: 750px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
}
.btns {
    padding: 10px 0px 10px 10px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}
</style>

 src/views/goalManagement/Goalsummary/index.vue

@@ -1,227 +0,0 @@
<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.searchParams.year" placeholder="年度" />
                    </el-form-item>
                </el-col>
                <el-col :span="4" >
                    <el-form-item size="default">
                        <el-tree-select v-model="ruleForm.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" @click="exportExcel('tab1', '会员明细.xlsx')">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" id="tab1">
                <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>
    </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';
import { goalManagementApi } from '/@/api/goalManagement';

import * as XLSX from 'xlsx';

export default defineComponent({
    components: { ElButton, ElInput },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                year: '', //年度
                departmentId: '', //责任部门
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        const resetForm = () => {
            ruleForm.searchParams.year = '';
            ruleForm.searchParams.departmentId = '';
        };
        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 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 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 exportExcel = (id:string,name:string) => {
            let workbook = XLSX.utils.table_to_book(document.getElementById(id)); //需要在table上定义一个id
            try {
                XLSX.writeFile(workbook, name);
                console.log('导出成功!');
            } catch (e) {
                console.log('导出失败!');
            }
        }
        return {
            ruleForm,
            tableData,
            currentPage4,
            pageSize4,
            total,
            data,
            resetForm,
            listApi,
            handleSizeChange,
            handleCurrentChange,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            exportExcel
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: left;
}
.btns p {
    font-size: 18px;
    line-height: 40px;
    margin-right: 20px;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

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

@@ -1,204 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :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" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="员工姓名" size="default">
                        <el-input v-model="form.personName" placeholder="请选择">
                            <template #append> <el-button :icon="Search" @click="daiInpts(0)" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="奖惩名称" size="default">
                        <el-input v-model="form.rewardPunishmentStandardName" placeholder="请选择">
                            <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-select v-model="form.standardType" disabled size="default" style="width: 100%" placeholder="请选择">
                            <el-option label="奖励" :value="1" />
                            <el-option label="惩罚" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="奖惩内容" size="default">
                        <el-input disabled v-model="form.content" placeholder="请填写奖惩内容" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="依据" size="default">
                        <el-input disabled v-model="form.reason" placeholder="请填写奖惩依据" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注信息">
                        <el-input v-model="form.memo" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default" :disabled="disabled">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUser ref="Show" @SearchUser="UserId"></DailogSearchUser>
    <DailogSearch ref="Shows" @backNum="numberId"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearch from './DailogSearch.vue';
import { goalManagementApi } from '/@/api/goalManagement';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
export default defineComponent({
    components: { DailogSearch, DailogSearchUser },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            rewardPunishmentStandardId: '', //奖惩标准/外键
            rewardPunishmentStandardName: '',
            memo: '', ////备注信息
            personId: '', ////员工（多个用逗号隔开）
            personName: '',
        });
        const titles = ref();
        const disabled = ref(false);
        // 打开弹窗
        const openDailog = (title: string, value: any, data: any) => {
            dialogVisible.value = true;
            titles.value = `${title}奖惩标准设定`;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                goalManagementApi()
                    .getrewardPunishmentDetail(data.id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            form.value.standardType = data.standardType;
                            form.value.content = data.content;
                            form.value.reason = data.reason;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            delete form.value.standardType;
            delete form.value.content;
            delete form.value.reason;
            delete form.value.rewardPunishmentStandardName
            goalManagementApi()
                .getrewardPunishmentAddOrUpdate(form.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('navAddorUpdata');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                rewardPunishmentStandardId: '', //奖惩标准/外键
                rewardPunishmentStandardName: '',
                memo: '', ////备注信息
                personId: '', ////员工（多个用逗号隔开）
                personName: '',
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                rewardPunishmentStandardId: '', //奖惩标准/外键
                rewardPunishmentStandardName: '',
                memo: '', ////备注信息
                personId: '', ////员工（多个用逗号隔开）
                personName: '',
            };
        };

        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
        };
        const Show = ref();
        const daiInpts = (type: any) => {
            Show.value.openDailog(type);
        };
        const numberId = (val: any) => {
            console.log(val);
            form.value.rewardPunishmentStandardId = val.id;
            form.value.rewardPunishmentStandardName = val.qname;
            form.value.standardType = val.standardType;
            form.value.content = val.content;
            form.value.reason = val.reason;
        };
        const UserId = (val: any) => {
            let arr = [];
            let arrId = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].realName);
                arrId.push(val[i].uid);
            }
            form.value.personName = arr.toString();
            form.value.personId = arrId.toString();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            UserId,
            form,
            titles,
            disabled,
            openDailog,
            submitForm,
            numberId,
            resetForm,
            Shows,
            daiInpt,
            Show,
            daiInpts,
            full,
            toggleFullscreen,
            Search,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/IncentiveRecording/component/DailogSearch.vue

@@ -1,204 +0,0 @@
<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-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.searchParams.standardType" placeholder="奖惩类型" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6" :offset="1">
                    <el-form-item>
                        <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col> -->
                        <el-col :span="11" :offset="1">
                            <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>
                <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="qname" label="奖惩名称" width="180" />
                    <el-table-column align="center" label="奖惩类型" width="180">
                        <template #default="scope">
                            <span v-if="scope.row.standardType == 1">奖励</span>
                            <span v-if="scope.row.standardType == 2">惩罚</span>
                            <span></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="content" 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="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :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"
                        class="mx-1"
                        style="margin: 5px"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(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="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
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(props, { emit }) {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                standardType: '', ////奖惩类型 1:奖励 2:惩罚
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.standardType = '';
            listApi();
        };
        const listApi = () => {
            goalManagementApi()
                .getrewardPunishmentStandardList(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.standardType = targetType.paneName;
            listApi();
        };
        onMounted(() => {});
        // 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`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        // 打开弹窗
        const dialogVisible = ref(false);
        const openDailog = () => {
            dialogVisible.value = true;
            listApi();
        };
        // 右方点击添加后显示标签
        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 clear = () => {
            dynamicTags.value = [''];
            radio1.value = '';
        };
        const submitForm = () => {
            let obj = JSON.parse(JSON.stringify(dynamicTags.value));
            emit('backNum', obj[0]);
            dialogVisible.value = false;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            submitForm,
            radio,
            radio1,
            clear,
            dialogVisible,
            openDailog,
            ruleForm,
            resetForm,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            listApi,
            handleClick,
            handleClose,
            Delete,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/IncentiveRecording/index.vue

@@ -1,302 +0,0 @@
<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="personName" placeholder="请选择被奖惩者">
                            <template #append>
                                <el-button :icon="Search" @click="openSearch" />
                            </template>
                        </el-input>
                    </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="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" :disabled="warning" type="warning" plain :icon="EditPen"
                                @click="openD('修改', editRow)">修改</el-button>
                    <el-button size="default" :disabled="danger" type="danger" :icon="Delete" plain @click="onDeleteAll">删除 </el-button>
                </div>
                <div>
                    <!-- <el-button size="default" :icon="Download"></el-button>
                    <el-button size="default" :icon="Refresh"></el-button> -->
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column property="createTime" align="center" label="奖惩日期" :formatter="timeDate" sortable />
                <el-table-column label="奖惩类型" align="center" sortable>
                    <template #default="scope">
                        <span v-if="scope.row.standardType == 1">奖励</span>
                        <span v-if="scope.row.standardType == 2">惩罚</span>
                    </template>
                </el-table-column>
                <el-table-column property="personName" align="center" label="被奖惩者" sortable />
                <el-table-column property="content" label="奖惩内容" align="center" sortable show-overflow-tooltip />
                <el-table-column property="reason" 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="default" :icon="View" @click="openD('查看', scope.row)">查看 </el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" @click="openD('修改', scope.row)">修改</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>
            <DailogSearchUser ref="openUser" @SearchUser="userId"></DailogSearchUser>
        </div>
    </div>
</template>
<script lang="ts">
import DailogAdd from './component/DailogAdd.vue';
import {timeDate} from '/@/assets/index.ts'
import DailogSearchUser from '/@/components/DailogSearchUser/index.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, Search } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput, DailogAdd, DailogSearchUser },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                personId: '', ////员工
            },
        });
        // 重置
        const personName=ref()
        const resetForm = () => {
            ruleForm.searchParams.personId = '';
            personName.value = '';
            listApi();
        };
        const listApi = () => {
            goalManagementApi()
                .getrewardPunishmentList(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.personId = 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`);
            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.openDailog(title, ruleForm.searchParams.personId, id);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getrewardPunishmentDelete(arr)
                        .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 editRow = ref()
        const handleSelectionChange = (val: any) => {
            editRow.value = val[0]
            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
            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()
                        .getrewardPunishmentDelete(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 openUser = ref();
        const openSearch = () => {
            openUser.value.openDailog();
        };
        const userId = (val: any) => {
            ruleForm.searchParams.personId = val.uid;
            personName.value = val.realName;
        };
        return {
            timeDate,
            personName,
            ruleForm,
            userId,
            resetForm,
            listApi,
            handleClick,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            openD,
            onDelete,
            openAdd,
            warning,
            danger,
            deletAll,
            openSearch,
            handleSelectionChange,
            onDeleteAll,
            openUser,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen,
            Search,
            editRow
        };
    },
});
</script>
<style scoped>
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}

.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}

.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}

.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

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

@@ -1,147 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible"  :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" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="奖惩类型" size="default">
                        <el-select v-model="form.standardType" style="width: 100%" placeholder="请选择">
                            <el-option label="奖励" :value="1" />
                            <el-option label="惩罚" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="奖惩内容" size="default">
                        <el-input v-model="form.content" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="奖惩名称" size="default">
                        <el-input v-model="form.qName" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="依据" size="default">
                        <el-input v-model="form.reason" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注信息">
                        <el-input v-model="form.memo" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default" :disabled="disabled">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
export default defineComponent({
    setup(props, { emit }) {
        let Shows = ref(false);
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            qName: "", ////奖惩名称
            reason: "", ////依据
            memo: "", ////备注信息
            content: "", ////奖惩内容
            standardType: null ////奖惩类型 1:奖励 2:惩罚
        });
        const titles = ref();
        const disabled = ref(false);
        // 打开弹窗
        const openDailog = (title: string, value: any, id: number) => {
            dialogVisible.value = true;
            titles.value = `${title}奖惩标准设定`;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                goalManagementApi()
                    .getrewardPunishmentStandardDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            goalManagementApi()
                .getrewardPunishmentStandardaddOrUpdate(form.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('navAddorUpdata');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                qName: "", ////奖惩名称
                reason: "", ////依据
                memo: "", ////备注信息
                content: "", ////奖惩内容
                standardType: null, ////奖惩类型 1:奖励 2:惩罚
            }
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                qName: "", ////奖惩名称
                reason: "", ////依据
                memo: "", ////备注信息
                content: "", ////奖惩内容
                standardType: null, ////奖惩类型 1:奖励 2:惩罚
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };

        return {
            form,
            titles,
            dialogVisible,
            openDailog,
            disabled,
            Search,
            submitForm,
            resetForm,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/Incentivestandard/index.vue

@@ -1,283 +0,0 @@
<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
            <el-row>
                <el-col :span="4">
                    <el-form-item>
                        <el-select v-model="ruleForm.searchParams.standardType" size="default" style="width: 100%" placeholder="请选择">
                            <el-option label="奖励" value="1" />
                            <el-option label="惩罚" value="2" />
                        </el-select>
                    </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="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" plain :icon="EditPen"
                                @click="openD('修改', deletAll[0])">修改 </el-button>
                    <el-button size="default" type="danger" :disabled="danger" :icon="Delete" plain @click="handleSelectionChange">删除</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-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column property="qname" align="center" label="奖惩名称" sortable />
                <el-table-column property="name" align="center" label="奖惩类型" sortable>
                    <template #default="scope">
                        <span v-if="scope.row.standardType == 1">奖励</span>
                        <span v-if="scope.row.standardType == 2">惩罚</span>
                    </template>
                </el-table-column>
                <el-table-column property="content" label="奖惩内容" align="center" sortable show-overflow-tooltip />
                <el-table-column property="reason" label="依据" align="center" sortable show-overflow-tooltip />
                <el-table-column property="memo" 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="default" :icon="View" @click="openD('查看', scope.row.id)">查看 </el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" @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 { 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 type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput, upData, DailogAdd },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                standardType: '', ////奖惩类型 1:奖励 2:惩罚
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.standardType = '';
            listApi();
        };
        const listApi = () => {
            goalManagementApi()
                .getrewardPunishmentStandardList(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.standardType = 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`);
            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.openDailog(title, ruleForm.searchParams.standardType, id);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getrewardPunishmentStandardDelete(arr)
                        .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;
            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()
                        .getrewardPunishmentStandardDelete(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 {
            ruleForm,
            resetForm,
            listApi,
            handleClick,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            openAdd,
            openD,
            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;
}

.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}

.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}

.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

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

@@ -1,246 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :before-close="resetForm" :fullscreen="full" :title="titles" width="50%" draggable @close="resetForm">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="岗位" size="default">
                        <el-input v-model="form.jobName" placeholder="请选择">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="责任书签订日期" size="default">
                        <el-date-picker v-model="form.signDate" style="width:100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择日期时间" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注信息">
                        <el-input v-model="form.memo" type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="责任书附件">
                        <uploaderFile :fileList="fileList" :systemName="'GOAL_MANAGE'" :disabled="disabled"
                                      @successUploader="successUploader" @deleteFile="deleteFile"></uploaderFile>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearch ref="Shows" @backNum="IdNumber"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearch from './DailogSearch.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
import uploaderFile from '/@/components/uploaderFile/index.vue';
export default defineComponent({
    components: { DailogSearch,uploaderFile },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            indexNum: '', //目标指标编号
            memo: '', ////备注信息
            signDate: '', //责任书签订日期
            extraFile: '', //责任书附件
            jobId: '', //岗位
        });
        const titles = ref();
        const disabled = ref(false);
        // 打开弹窗
        const openDailog = (title: string, value: any, id: number) => {
            dialogVisible.value = true;
            titles.value =`${title}目标责任书`;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                goalManagementApi()
                    .gettargetDutyfileInfoDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            form.value.signDate=timeC(form.value.signDate)


                            if(res.data.data.extraFile!=null&&res.data.data.extraFile!=''){
                                var extraFileList = res.data.data.extraFile.split(',')
                                for(var a = 0;a<extraFileList.length;a++){
                                    fileList.value.push(
                                            {
                                                name:extraFileList[a]
                                            }
                                    )
                                }
                            }else {
                                fileList.value = []
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 上传成功组装数据
        const successUploader = (list) =>{
            console.log('successUploader',list)
            fileList.value = list
            var formFileList = ''
            for(var a = 0;a<fileList.value.length;a++){
                if(a==fileList.value.length-1){
                    formFileList+=fileList.value[a].name
                }else {
                    formFileList+=fileList.value[a].name+','
                }
            }
            form.value.extraFile = formFileList
        }
        const deleteFile = (list) =>{
            console.log('deleteFile',list)
            fileList.value = list
            const formFileList = ''
            for(var a = 0;a<fileList.value.length;a++){
                if(a==fileList.value.length-1){
                    formFileList.value+=fileList.value[a].name
                }else {
                    formFileList.value+=fileList.value[a].name+','
                }
            }
            form.value.extraFile = formFileList
        }
        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m +`:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            delete form.value.jobName
            goalManagementApi()
                .gettargetDutyfileInfoAddorUpdata(form.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('navAddorUpdata');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                indexNum: '', //目标指标编号
                memo: '', ////备注信息
                signDate: '', //责任书签订日期
                extraFile: '666', //责任书附件
                jobId: '', //岗位
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                indexNum: '', //目标指标编号
                memo: '', ////备注信息
                signDate: '', //责任书签订日期
                extraFile: '666', //责任书附件
                jobId: '', //岗位
            };
            fileList.value = []
        };
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
        };
        const IdNumber=(val:any)=>{
         form.value.jobId=val.id
         form.value.jobName=val.date
        }
        // 点击上传
        const fileList = ref([
        ]);

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
                () => true,
                () => false
            );
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            timeC,
            IdNumber,
            dialogVisible,
            form,
            disabled,
            titles,
            openDailog,
            daiInpt,
            submitForm,
            resetForm,
            Shows,
            Search,
            fileList,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove,
            full,
            toggleFullscreen,
            FullScreen,
            successUploader,
            deleteFile
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/TargetBook/component/DailogSearch.vue

@@ -1,175 +0,0 @@
<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-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="岗位名称" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6" :offset="1">
                    <el-form-item>
                        <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col> -->
                        <el-col :span="11" :offset="1">
                            <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>
                <el-button size="default" :icon="Delete">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px"  >
                    <el-table-column align="center" width="70px">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="date" 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"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @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"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.date }}
                </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="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';
export default defineComponent({
    setup(props,{emit}) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
        };
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = [
            {   id:1,
                date: '岗位1',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                id:2,
                date: '岗位2',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {	
                id:3,	
                date: '岗位3',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {    id:4,
                date: '岗位4',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const pageSize4 = ref(100);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        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 clear=()=>{
            dynamicTags.value=['']
            radio1.value=""
        }
            const submitForm=()=>{
            let obj=JSON.parse(JSON.stringify(dynamicTags.value))
            emit("backNum",obj[0])
            dialogVisible.value = false
        }
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            radio1,
            radio,
            clear,
            dialogVisible,
            openDailog,
            ruleForm,
            tableData,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            submitForm,
            Delete,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/TargetBook/index.vue

@@ -1,289 +0,0 @@
<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="jobName" placeholder="请选择岗位">
                            <template #append> <el-button :icon="Search" @click="openSearch" /> </template
                        ></el-input>
                    </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="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" :disabled="warning" type="warning" plain :icon="EditPen"
                               @click="openD('修改', deletAll[0])">修改</el-button>
                    <el-button size="default" :disabled="danger" type="danger" :icon="Delete" plain @click="onDeleteAll">删除</el-button>
                </div>
                <div>
                    <!-- <el-button size="default" :icon="Download"></el-button>
                    <el-button size="default" :icon="Refresh"></el-button> -->
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column type="index" label="序号" align="center" width="70" />
                <el-table-column property="jobId" align="center" label="岗位" sortable />
                <el-table-column property="signDate" align="center" label="责任书签订日期" :formatter="timeDate" sortable />
                <el-table-column property="extraFile" align="center" label="附件" sortable />
                <el-table-column property="memo" label="备注信息" align="center" sortable show-overflow-tooltip />
                <el-table-column label="操作" align="center" style="width: 300px">
                    <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="EditPen" @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>
            <DailogSearch ref="openUser"  @backNum="IdNumber"></DailogSearch>
        </div>
    </div>
</template>
<script lang="ts">
import DailogAdd from './component/DailogAdd.vue';
import {timeDate} from '/@/assets/index.ts'
import DailogSearch from './component/DailogSearch.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, Search } 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, DailogAdd, DailogSearch },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                jobId: '', ////岗位号/外键
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.jobId = '';
            jobName.value=""
            listApi();
        };
        const listApi = () => {
            goalManagementApi()
                .gettargetDutyfileInfoList(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.jobId = targetType.paneName;
            listApi();
        };
        onMounted(() => {
            listApi();
        });
        const onAddorUpdata = () => {
            listApi();
        };
        const jobName=ref()
        const IdNumber=(val:any)=>{
         ruleForm.jobId=val.id
         jobName.value=val.date
        }
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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.openDailog(title, ruleForm.searchParams.jobId, id);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .gettargetDutyfileInfoDelete(arr)
                        .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
            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()
                        .gettargetDutyfileInfoDelete(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 openUser = ref();
        const openSearch = () => {
            openUser.value.openDailog();
        };
        return {
            IdNumber,
            ruleForm,
            resetForm,
            listApi,
            handleClick,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            openAdd,
            openD,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            openUser,
            openSearch,
            timeDate,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen,
            Search,
        };
    },
});
</script>
<style scoped>
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/index.vue

@@ -1,14 +0,0 @@
<template>
    <router-view></router-view>
</template>

<script>
export default {
    name: "index"
}
</script>

<style scoped>

</style>


 src/views/goalManagement/performanceAppraisal/component/DailogAq.vue

@@ -1,455 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" @close="handleClose(ruleFormRef)" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="考核标题" size="default" prop="title">
                        <el-input v-model="form.title" placeholder="请填写考核标题"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核日期" size="default" prop="examineDate">
                        <el-date-picker
                            v-model="form.examineDate"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="请选择"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="合格分数" size="default" prop="acceptanceNumber">
                        <el-input v-model="form.acceptanceNumber" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="总分" size="default" prop="examineTotalNumber">
                        <el-input v-model="form.examineTotalNumber" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="考核部门" size="default" prop="examineDepartmentId">
                        <el-tree-select
                            v-model="form.examineDepartmentId"
                            :data="data"
                            class="w100"
                            @node-click="nameData1"
                            :props="propse"
                            check-strictly
                            placeholder="请选择"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核人" size="default" prop="examinePersonName">
                        <el-input v-model="form.examinePersonName">
                            <template #append> <el-button :icon="Search" @click="daiInpt(1)" /></template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="被考核部门" size="default" prop="beExaminedDepartmentId">
                        <el-tree-select
                            v-model="form.beExaminedDepartmentId"
                            :data="data"
                            @node-click="nameData2"
                            class="w100"
                            :props="propse"
                            check-strictly
                            placeholder="请选择"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="被考核人" size="default" prop="beExaminedPersonName">
                        <el-input v-model="form.beExaminedPersonName">
                            <template #append> <el-button :icon="Search" @click="daiInpt(0)" /></template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="附件">
                        <uploaderFile :fileList="fileList" :systemName="'GOAL_MANAGE'" :disabled="disabled"
                                      @successUploader="successUploader" @deleteFile="deleteFile"></uploaderFile>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="考核模板" size="default" prop="examineTemplateName">
                        <el-input v-model="form.examineTemplateName">
                            <template #append> <el-button :icon="Search" @click="daiAdd" /></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="备注信息" prop="memo">
                        <el-input v-model="form.memo" type="textarea"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <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-tab-pane>
        </el-tabs>
        <el-table :data="form.numberDetailJson" style="width: 100%">
            <el-table-column align="center" prop="itemDetail" label="考核项目" />
            <el-table-column align="center" prop="content" label="考核内容" />
            <el-table-column align="center" label="考核分数">
                <template #default="scope">
                    <el-input @blur="numberC" v-model.number="scope.row.number"> </el-input>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="address" label="制定日期" />
            <el-table-column align="center" prop="address" label="上报人" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary">查看</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearch ref="Show" @typeDome="onType"></DailogSearch>
    <DailogSearchUser ref="Shows" @SearchUser="userId"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearch from './DailogSearch.vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
import type { UploadProps, UploadUserFile } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import uploaderFile from '/@/components/uploaderFile/index.vue';
export default defineComponent({
    components: { DailogSearchUser, DailogSearch,uploaderFile },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const ruleFormRef = ref<FormInstance>();
        const form = ref({
            beExaminedDepartmentId: '', ////被考核部门ID/外键
            beExaminedDepartmentName: '',
            beExaminedPersonId: '', ////被考核人ID/外键（可能有多个，用逗号隔开）
            beExaminedPersonName: '',
            examineDate: '', ////考核日期
            examineDepartmentId: '', ////考核部门ID/外键
            examineDepartmentName: '',
            examinePersonId: '', ////考核人ID/外键
            examinePersonName: '',
            examineTemplateId: '', ////绩效考核模板ID/外键
            examineTemplateName: '',
            examineTotalNumber: '', ////总分
            acceptanceNumber: '', ///合格分数
            extraFile: '', //责任书附件
            itemDetail: '', ////考核项目
            memo: '', ////备注信息
            numberDetailJson: [], ////各个考核项目的具体得分，json格式。形式为：[{“id”:"123","number":"123"}]
            title: '', ////考核标题
        });
        const titles = ref();
        const titleT = ref();
        const disabled = ref(false);
        // 打开弹窗
        const openDailog = (title: string, value: any, id: number) => {
            department();
            dialogVisible.value = true;
            titles.value = `${title}安全考核管理`;
            titleT.value=title
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改')
                goalManagementApi()
                    .getexamineMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            form.value.examineDate = timeC(form.value.examineDate);
                            form.value.numberDetailJson = form.value.currentExamineDtoList;


                            if(res.data.data.extraFile!=null&&res.data.data.extraFile!=''){
                                var extraFileList = res.data.data.extraFile.split(',')
                                for(var a = 0;a<extraFileList.length;a++){
                                    fileList.value.push(
                                            {
                                                name:extraFileList[a]
                                            }
                                    )
                                }
                            }else {
                                fileList.value = []
                            }

                            // fileList.value = (res.data.data.fileList?res.data.data.fileList:[])
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        // 上传成功组装数据
        const successUploader = (list) =>{
            console.log('successUploader',list)
            fileList.value = list
            var formFileList = ''
            for(var a = 0;a<fileList.value.length;a++){
                if(a==fileList.value.length-1){
                    formFileList+=fileList.value[a].name
                }else {
                    formFileList+=fileList.value[a].name+','
                }
            }
            form.value.extraFile = formFileList
        }
        const deleteFile = (list) =>{
            console.log('deleteFile',list)
            fileList.value = list
            const formFileList = ''
            for(var a = 0;a<fileList.value.length;a++){
                if(a==fileList.value.length-1){
                    formFileList.value+=fileList.value[a].name
                }else {
                    formFileList.value+=fileList.value[a].name+','
                }
            }
            form.value.extraFile = formFileList
        }

        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m + `:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        // 验证
        const rules = reactive<FormRules>({
            title: [{ required: true, message: '考核标题不能为空', trigger: 'blur' }],
            examineDate: [{ required: true, message: '考核日期不能为空', trigger: 'blur' }],
            examineDepartmentId: [{ required: true, message: '考核部门不能为空', trigger: 'blur' }],
            examinePersonName: [],
            examinePersonId: [],
            beExaminedDepartmentId: [{ required: true, message: '被考核部门不能为空', trigger: 'blur' }],
            beExaminedPersonName: [],
            beExaminedPersonId: [],
            examineTemplateId: [],
            examineTemplateName: [{ required: true, message: '考核模板不能为空', trigger: 'blur' }],
            memo: [],
        });
        // 接收
        const onType = (data: any, val: any) => {
            form.value.examineTotalNumber = '';
            form.value.examineTemplateId = data.id;
            form.value.examineTemplateName = data.title;
            form.value.acceptanceNumber = data.acceptanceNumber;
            form.value.numberDetailJson = val.examineItemList;
        };
        const numberC = () => {
            let arr = 0;
            for (let i = 0; i < form.value.numberDetailJson.length; i++) {
                if (form.value.numberDetailJson[i].number != undefined) {
                    arr = parseInt(arr) + parseInt(form.value.numberDetailJson[i].number);
                } else {
                    arr = parseInt(arr) + 0;
                }
            }
            form.value.examineTotalNumber = arr;
        };
        // 提交
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    if(titleT.value=='新建'){
                        delete form.value.id
                    }
                    dialogVisible.value = false;
                    let arr = [];
                    for (let i = 0; i < form.value.numberDetailJson.length; i++) {
                        arr.push({
                            id: form.value.numberDetailJson[i].id,
                            number: form.value.numberDetailJson[i].number,
                        });
                    }
                    form.value.numberDetailJson = JSON.stringify(arr);
                    goalManagementApi()
                        .getexamineMngAddOrUpdate(form.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                emit('navAddorUpdata');
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
        //   取消
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            dialogVisible.value = false;
            formEl.resetFields();
        };
        const handleClose = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.resetFields();
            fileList.value=[]
        };
        const activeName = ref('1');
        // 新增弹窗
        const Show = ref();
        const daiAdd = () => {
            Show.value.openDailog();
        };
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = (type: any) => {
            Shows.value.openDailog(type);
        };
        // 点击上传
        const fileList = ref<UploadUserFile[]>([]);

        const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
            console.log(file, uploadFiles);
        };

        const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
            console.log(uploadFile);
        };

        const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
            ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
        };

        const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
            return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
                () => true,
                () => false
            );
        };
        const userId = (val: any, type: any) => {
            if (type == 1) {
                form.value.examinePersonId = val.uid;
                form.value.examinePersonName = val.realName;
            } else if (type == 0) {
                let uid = [];
                let realName = [];
                for (let i = 0; i < val.length; i++) {
                    uid.push(val[i].uid);
                    realName.push(val[i].realName);
                }
                form.value.beExaminedPersonId = uid.toString();
                form.value.beExaminedPersonName = realName.toString();
                console.log(form.value.beExaminedPersonId, form.value.beExaminedPersonName);
            }
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        //部门
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        const data = ref();
        const nameData1 = (val: any) => {
            form.value.examineDepartmentName = val.depName;
        };
        const nameData2 = (val: any) => {
            form.value.beExaminedDepartmentName = val.depName;
            console.log(form.value);
        };
        return {
            titleT,
            rules,
            timeC,
            numberC,
            onType,
            handleClose,
            nameData1,
            nameData2,
            ruleFormRef,
            department,
            propse,
            data,
            userId,
            activeName,
            dialogVisible,
            form,
            titles,
            disabled,
            openDailog,
            submitForm,
            resetForm,
            Show,
            daiAdd,
            Shows,
            daiInpt,
            Search,
            fileList,
            handleRemove,
            handlePreview,
            handleExceed,
            beforeRemove,
            full,
            toggleFullscreen,
            FullScreen,
            successUploader,
            deleteFile
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/performanceAppraisal/component/DailogKh.vue

@@ -1,247 +0,0 @@
<template>
    <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.title"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="适用范围" size="default">
                        <el-select v-model="form.applyRange" style="width: 100%" placeholder="请选择">
                            <el-option label="安全生产责任制考核1" value="1" />
                            <el-option label="安全生产责任制考核2" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div v-if="clickType">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="设定人" size="default">
                            <el-input v-model="form.setPersonId" 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-select v-model="form.setPersonDepartmentId" disabled style="width: 100%" placeholder="请选择">
                                <el-option label="Zone one" value="shanghai" />
                                <el-option label="Zone two" value="beijing" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="模板分类编码" size="default">
                        <el-input v-model="form.templateCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="合格分数" size="default">
                        <el-input v-model="form.acceptanceNumber" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="备注信息">
                        <el-input v-model="form.memo" type="textarea" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2" v-if="clickType">
                    <el-form-item label="设定日期" size="default">
                        <el-date-picker disabled v-model="form.setTimem" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <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-tab-pane>
        </el-tabs>
        <el-table :data="form.examineItemList" style="width: 100%">
            <el-table-column align="center" prop="itemType" label="类型" width="180" />
            <el-table-column align="center" prop="itemDetail" label="考核项目" width="180" />
            <el-table-column align="center" prop="content" label="考核内容" />
            <el-table-column align="center" prop="judgeStandard" label="评定标准" />
            <el-table-column align="center" prop="memo" label="考核说明" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="daiAdd('查看', scope.row)">查看</el-button>
                    <el-button link type="primary" @click="daiAdd('修改', scope.row)">修改</el-button>
                    <el-button link type="primary" @click="deleteA(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogKhS ref="Show" @onAdd="AddObj"></DailogKhS>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogKhS from './DailogKhS.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { DailogKhS },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            examineItemList: [], //考核项目列表
            setTimem: 1658386392466,
            memo: '', ////备注信息
            templateCode: '', ////模板分类编码
            title: '', ////标准标题
            setPersonId: 1, //设定人
            acceptanceNumber: '', ////合格分数
            setPersonDepartmentId: 2, //设定人部门
            applyRange: '', ////适用范围
        });
        const titles = ref();
        const titleT = ref();
        const disabled = ref(false);
        const clickType = ref(false);
        // 打开弹窗
        const openDailog = (title: string, value: any, id: number) => {
            dialogVisible.value = true;
            titles.value = `${title}安全考核管理`;
            titleT.value=title
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改') {
                goalManagementApi()
                    .getexamineTemplateDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            } else {
                clickType.value = false;
            }
        };
        // 接受传值
        const AddObj = (val: any) => {
            if (index.value == -1) {
                form.value.examineItemList.push(val);
            } else {
                form.value.examineItemList[index.value] = val;
            }
        };
        // 删除
        const deleteA = (tag: any) => {
            form.value.examineItemList.splice(form.value.examineItemList.indexOf(tag), 1);
        };
        // 提交
        const submitForm = () => {
            if(titleT.value=='新建'){
                delete form.value.id
            }
            dialogVisible.value = false;
            goalManagementApi()
                .getexamineTemplateAddOrUpdate(form.value)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('navAddorUpdata');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                examineItemList: [], //考核项目列表
                setTimem: 1658386392466,
                memo: '', ////备注信息
                templateCode: '', ////模板分类编码
                title: '', ////标准标题
                setPersonId: 1, //设定人
                acceptanceNumber: '', ////合格分数
                setPersonDepartmentId: 2, //设定人部门
                applyRange: '', ////适用范围
            };
        };
        //   取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                examineItemList: [], //考核项目列表
                setTimem: 1658386392466,
                memo: '', ////备注信息
                templateCode: '', ////模板分类编码
                title: '', ////标准标题
                setPersonId: 1, //设定人
                acceptanceNumber: '', ////合格分数
                setPersonDepartmentId: 2, //设定人部门
                applyRange: '', ////适用范围
            };
        };
        const activeName = ref('1');
        // 新增弹窗
        const index = ref<any>();
        const Show = ref();
        const daiAdd = (title: string, data: any) => {
            index.value = form.value.examineItemList.indexOf(data);
            Show.value.openDailog(title, data);
        };
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            titleT,
            index,
            form,
            dialogVisible,
            deleteA,
            AddObj,
            openDailog,
            activeName,
            titles,
            disabled,
            submitForm,
            resetForm,
            Show,
            daiAdd,
            Shows,
            daiInpt,
            Search,
            full,
            clickType,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/performanceAppraisal/component/DailogKhS.vue

@@ -1,133 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible"  :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" :disabled="disabled" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="类型">
                        <el-input v-model="form.itemType" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="考核项目">
                        <el-input v-model="form.itemDetail" type="textarea"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="考核内容">
                        <el-input v-model="form.content" type="textarea"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="评定标准">
                        <el-input v-model="form.judgeStandard" type="textarea"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="考核说明">
                        <el-input v-model="form.memo" type="textarea"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
<!--                <el-button type="primary" @click="dialogVisible = false" size="default">继续添加</el-button>-->
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- <DailogAdd ref="Show"></DailogAdd>
  <DailogSearch ref="Shows"></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 DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'
export default defineComponent({
    // components:{DailogAdd,DailogSearch},
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            itemType: '', ////类型
            memo: '', //备注
            itemDetail: '', ////考核项目
            content: '', ////考核内容
            judgeStandard: '', ////评定标准
        });
        const disabled=ref(false)
        const titles=ref()
        const openDailog = (title: string, value: any) => {
            dialogVisible.value = true;
            titles.value=`${title}考核项目`
            if (title == '查看') {
                form.value = value;
                disabled.value=true
            }else if(title == '修改'){
                disabled.value=false
                form.value = value;
            }
        };
        // 提交
        const submitForm = () => {
            dialogVisible.value = false;
            emit('onAdd', form.value);
            form.value = {
                itemType: '', ////类型
                memo: '', //备注
                itemDetail: '', ////考核项目
                content: '', ////考核内容
                judgeStandard: '', ////评定标准
            };
        };
        // 取消
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                itemType: '', ////类型
                memo: '', //备注
                itemDetail: '', ////考核项目
                content: '', ////考核内容
                judgeStandard: '', ////评定标准
            };
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            form,
            disabled,
            titles,
            dialogVisible,
            openDailog,
            submitForm,
            resetForm,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/performanceAppraisal/component/DailogSearch.vue

@@ -1,196 +0,0 @@
<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-row>
            <el-col :span="17">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.searchParams.title" placeholder="标准标题" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6" :offset="1">
                    <el-form-item>
                        <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" />
                    </el-form-item>
                </el-col> -->
                        <el-col :span="11" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" @click="listApi()">查询</el-button>
                                <el-button size="default" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" >
                    <el-table-column align="center" width="70px">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="title" 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="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :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"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.title }}
                </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="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 { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup(props,{emit}) {
        const dialogVisible = ref<boolean>(false);
        const openDailog = () => {
            dialogVisible.value = true;
            listApi()
        };
        // 搜索条件
        const ruleForm = reactive({
                pageSize: 10,
            pageIndex: 1,
            searchParams: {
                title: '', //标准标题
            },
        });
        const listApi = () => {
            goalManagementApi()
                .getexamineTemplateList(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 reset=()=>{
        ruleForm.searchParams.title=""
        listApi()
    }
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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 submitForm=()=>{
        dialogVisible.value = false
        emit("typeDome",dynamicTags.value[0],list.value)
        clear()
        }
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: string) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const list=ref([])
        const radio = (event: any) => {
			
                goalManagementApi()
                    .getexamineTemplateDetail(event.id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            list.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
                    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;
            }
        };
        return {
            submitForm,
            list,
            reset,
            dialogVisible,
            listApi,
            openDailog,
            ruleForm,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            dynamicTags,
            handleClose,
            Delete,
            full,
            toggleFullscreen,
            radio1,
            radio,
            clear,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/performanceAppraisal/index.vue

@@ -1,526 +0,0 @@
<template>
    <div>
        <div class="minCenter">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="安全考核管理" name="1">
                    <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
                        <el-row>
                            <el-col :span="4">
                                <el-form-item size="default">
                                    <el-tree-select v-model="ruleForm.searchParams.examineDepartmentId" :data="data" check-strictly="true" class="w100" :props="propse" 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="btns">
                        <div>
                            <el-button size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button>
                             <el-button size="default" :disabled="warning" type="warning" plain :icon="EditPen"
                                        @click="openD('修改', deletAll[0])">修改</el-button>
                            <el-button size="default" :disabled="danger" type="danger" plain :icon="Delete" @click="onDeleteAll">删除</el-button>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" align="center" width="55" />
                        <el-table-column type="expand">
                            <template #default="scope">
                                <div class="tableC">
                                    <el-table :data="scope.row.currentExamineDtoList" style="width: 100%">
                                        <el-table-column align="center" prop="itemDetail" label="考核项目" />
                                        <el-table-column align="center" prop="content" label="考核内容" />
                                        <el-table-column align="center" prop="number" label="考核分数" />
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column property="examineDate" align="center" :formatter="timeDate" label="考核日期" sortable />
                        <el-table-column property="examineDepartmentName" align="center" label="考核部门" sortable />
                        <el-table-column property="examinePersonName" label="考核人" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="beExaminedDepartmentName" label="被考核部门" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="examineTotalNumber" label="总分" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="numberDetailJson.number" label="考核结果" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="extraFile" label="附件" align="center" sortable show-overflow-tooltip />
                        <el-table-column label="操作" align="center" width="250px">
                            <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="EditPen" @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>
                </el-tab-pane>
                <el-tab-pane label="考核标准设定" name="2">
                    <el-form :model="ruleForms" status-icon label-width="20px" class="topTitle">
                        <el-row>
                            <el-col :span="4">
                                <el-form-item size="default">
                                    <el-input v-model="ruleForms.searchParams.title" placeholder="标准标题" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item>
                                    <el-button size="default" type="primary" @click="listApis">查询</el-button>
                                    <el-button size="default" @click="resetForms">重置</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="btns">
                        <div>
                            <el-button size="default" type="primary" :icon="Plus" @click="openDs('新建')">新建</el-button>
                            <!-- <el-button size="default" :disabled="warnings" type="warning" plain :icon="EditPen">修改</el-button> -->
                            <el-button size="default" :disabled="dangers" type="danger" plain :icon="Delete"  @click="onDeleteAlls">删除</el-button>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" :data="tableDatas" style="width: 100%" @selection-change="handleSelectionChanges">
                        <el-table-column type="selection" align="center" width="55" />
                        <el-table-column type="expand">
                            <template #default="scope">
                                <div class="tableC">
                                    <el-table :data="scope.row.examineItemList" style="width: 100%">
                                        <el-table-column align="center" prop="itemType" label="类型" />
                                        <el-table-column align="center" prop="itemDetail" label="考核项目" />
                                        <el-table-column align="center" prop="content" label="考核内容" />
                                        <el-table-column align="center" prop="judgeStandard" label="评定标准" />
                                        <el-table-column align="center" prop="memo" label="考核说明" />
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="标准标题" property="title" align="center" sortable />
                        <el-table-column property="applyRange" align="center" label="适用范围" sortable />
                        <el-table-column property="setPersonName" label="设定人" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="setPersonDepartmentName" label="设定人部门" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="setTimem" label="设定日期" align="center" :formatter="timeDate" sortable show-overflow-tooltip />
                        <el-table-column property="templateCode" label="模板分类编码" align="center" sortable show-overflow-tooltip />
                        <el-table-column property="acceptanceNumber" label="合格分数" align="center" sortable show-overflow-tooltip />
                        <el-table-column label="操作" align="center" width="250px">
                            <template #default="scope">
                                <el-button link type="primary" size="default" :icon="View" @click="openDs('查看', scope.row.id)">查看</el-button>
                                <el-button link type="primary" size="default" :icon="EditPen" @click="openDs('修改', scope.row.id)">修改</el-button>
                                <el-button link type="primary" size="default" :icon="Delete" @click="onDeletes(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination
                            v-model:currentPage="currentPage4s"
                            v-model:page-size="pageSize4s"
                            :page-sizes="[10, 20, 30, 40]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totals"
                            @size-change="handleSizeChanges"
                            @current-change="handleCurrentChanges"
                        />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <DailogAq ref="openAdd" @navAddorUpdata="onAddorUpdata"></DailogAq>
        <DailogKh ref="openAdds" @navAddorUpdata="onAddorUpdatas"></DailogKh>
    </div>
</template>
<script lang="ts">
import {timeDate} from '/@/assets/index.ts'
import DailogAq from './component/DailogAq.vue';
import DailogKh from './component/DailogKh.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import type { TabsPaneContext } from 'element-plus'
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput, DailogAq, DailogKh },
    setup() {
        // 搜索条件 安全考核管理
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                examineDepartmentId: '',
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.examineDepartmentId = '';
            listApi()
        };
        const listApi = () => {
            goalManagementApi()
                .getexamineMngList(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 onAddorUpdata = () => {
            listApi();
        };
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        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.openDailog(title, ruleForm.searchParams.examineDepartmentId, id);
        };
        // 删除
        const onDelete = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getexamineMngDelete(arr)
                        .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
            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()
                        .getexamineMngDelete(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 activeName = ref('1');
        const handleClick = (val: TabsPaneContext) => {
            console.log(val)
            if (val.props.name == '1') {
                listApi();
            }else{
                listApis();
            }
        };
        // 搜索条件 考核标准设定
        const ruleForms = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                title: '', //标准标题
            },
        });
        // 重置
        const resetForms = () => {
            ruleForms.searchParams.title = '';
            listApis()
        };
        const listApis = () => {
            goalManagementApi()
                .getexamineTemplateList(ruleForms)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableDatas.value = res.data.data;
                        currentPage4s.value = res.data.pageIndex;
                        pageSize4s.value = res.data.pageSize;
                        totals.value = res.data.total;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        onMounted(() => {
            listApis();
            department()
        });
        const onAddorUpdatas = () => {
            listApis();
        };
        // 表格
        const tableDatas = ref();
        const currentPage4s = ref();
        const pageSize4s = ref();
        const totals = ref();
        const handleSizeChanges = (val: number) => {
            // console.log(`${val} items per page`);
            ruleForms.pageSize = val;
            listApis();
        };
        const handleCurrentChanges = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForms.pageIndex = val;
            listApis();
        };
        // 弹窗
        const openAdds = ref();
        const openDs = (title: String, id: number) => {
            openAdds.value.openDailog(title, ruleForm.searchParams.examineDepartmentId, id);
        };
        // 删除
        const onDeletes = (id: number) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getexamineTemplateDelete(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApis();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    });
                });
        };
        // 批量删除
        const warnings = ref(true);
        const dangers = ref(true);
        const deletAlls = ref();
        const handleSelectionChanges = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAlls.value = arr;
            if (val.length == 1) {
                warnings.value = false;
                dangers.value = false;
            } else if (val.length == 0) {
                warnings.value = true;
                dangers.value = true;
            } else {
                warnings.value = true;
                dangers.value = false;
            }
        };
        const onDeleteAlls = () => {
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getexamineTemplateDelete(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApis();
                            } else {
                                ElMessage.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                    // ElMessage({
                    //     type: 'info',
                    //     message: 'Delete canceled',
                    // });
                });
        };
            //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        const data = ref();
        return {
            timeDate,
            department,
            propse,
            data,
            activeName,
            ruleForm,
            resetForm,
            listApi,
            handleClick,
            onAddorUpdata,
            tableData,
            currentPage4,
            pageSize4,
            total,
            handleSizeChange,
            handleCurrentChange,
            openAdd,
            openD,
            onDelete,
            warning,
            danger,
            deletAll,
            handleSelectionChange,
            onDeleteAll,
            ruleForms,
            resetForms,
            listApis,
            onAddorUpdatas,
            tableDatas,
            currentPage4s,
            pageSize4s,
            totals,
            handleSizeChanges,
            handleCurrentChanges,
            openAdds,
            openDs,
            onDeletes,
            warnings,
            dangers,
            deletAlls,
            handleSelectionChanges,
            onDeleteAlls,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
            EditPen,
        };
    },
});
</script>
<style scoped>
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 20px;
}
.topTitle {
    padding: 5px 0 20px 0;
    border-bottom: 1px solid #dedede;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

 src/views/goalManagement/processForms/component/formInformationTop.vue

@@ -1,144 +0,0 @@
<template>
    <el-form ref="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>
                    </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>
                    </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>
                    </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>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" style="padding: 0 20px">
            <el-tab-pane label="考核指标" name="1">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="70" />
                    <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-input v-model="form.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="检查人" />
                    <el-table-column align="center" prop="address" label="检查时间" />
                </el-table>
                <div class="tiao">
                 <div class="typeS">审批</div>
                </div>
                <el-row style="padding:20px 0">
                    <el-col :span="6" style="text-align:right">一级审批：</el-col>
                    <el-col :span="18">同意</el-col>
                </el-row>
                <el-row style="padding:0 0 20px 0">
                    <el-col :span="6"></el-col>
                    <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px;">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
</template>
<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'

export default defineComponent({
    setup() {
            const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
            const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const activeName = ref('1');
        return{
            form,
            tableData,
            activeName
        }
    },
})
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:0 0 20px 0 ;
}
</style>

 src/views/goalManagement/processForms/component/formInformationTops.vue

@@ -1,162 +0,0 @@
<template>
    <el-form ref="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>
                </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>
                </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>
                </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>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="改进期限" size="default">
                    <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
                </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>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="发起时间" size="default">
                    <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-tabs v-model="activeName" style="padding: 0 20px">
        <el-tab-pane label="考核指标" name="1">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" type="index" label="序号" width="70" />
                <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-input v-model="form.name" placeholder=""></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="address" label="检查人" />
                <el-table-column align="center" prop="address" label="检查时间" />
            </el-table>
            <div class="tiao">
                <div class="typeS">审批</div>
            </div>
            <el-row style="padding: 20px 0">
                <el-col :span="6" style="text-align: right">一级审批：</el-col>
                <el-col :span="18">同意</el-col>
            </el-row>
            <el-row style="padding: 0 0 20px 0">
                <el-col :span="6"></el-col>
                <el-col :span="18"><span class="logoColor">同意</span><span style="margin-right: 8px">杜建喜</span><span>2021-05-24 04:47:42</span></el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
    setup() {
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const activeName = ref('1');
        return {
            form,
            tableData,
            activeName,
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0;
    position: relative;
}
.typeS {
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor {
    background-color: #67c23a;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns {
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
.el-row{
    padding:20px 0 0px 0;
}
</style>

 src/views/goalManagement/processForms/component/lowerPlate.vue

@@ -1,120 +0,0 @@
<template>
    <div class="box">
        <el-form ref="formS" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="15">
                    <el-form-item label="流程标题" size="default">
                        <el-input v-model="form.names" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="下级审批日期" size="default">
                        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                            <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.delivery">
                <el-col :span="15">
                    <el-form-item label="抄送给" prop="resource" size="default">
                        <el-input v-model="form.resource" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="">
                        <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.type">
                <el-col :span="15">
                    <el-form-item label="指定" prop="desc" size="default">
                        <el-input v-model="form.desc" placeholder="">
                            <template #append> <el-button :icon="Search" @click="openDai" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <DailogSearchUser ref="ShowUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'
import { Search } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
    components:{DailogSearchUser},
    setup() {
        const formS=ref<FormInstance>()
        let form = reactive({
            names: '',
            region: '',
            date1: '',
            date2: '',
            delivery: "",
            type: "",
            resource: '',
            desc: '',
        });
    const typeChang=()=>{
         console.log('tag',form)
        }
        const rules = reactive<FormRules>({
  resource: [
    {
      type: 'array',
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ],
  desc: [
    {
      required: true,
      message: '用户不能为空',
      trigger: 'change',
    },
  ]})
  const ShowUser=ref()
  const openDai =()=>{
   ShowUser.value.openDailog()
  }
        return {
            form,
            rules,
            formS,
            typeChang,
            ShowUser,
            openDai,
            Search,
        };
    },
});
</script>

<style scoped>
.box {
    margin: 30px 0 100px 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
    padding: 20px;
}
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/processForms/processForms.vue

@@ -1,124 +0,0 @@
<template>
    <div>
    <h4 class="title">胡海涛2022-07-01 16:08:42发起了目标检查上报（检查）--检查</h4>
    <div class="box">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        background-color="#ebeef5"
        text-color="#fff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
    >
        <el-menu-item index="1">表单信息</el-menu-item>
        <!-- <el-menu-item index="2">流程图</el-menu-item> -->
    </el-menu>
    <div v-if="activeIndex == 1" class="navType">
        <formInformationTop v-if="false"></formInformationTop>
        <formInformationTops></formInformationTops>
    </div>
    <!-- <div v-if="activeIndex == 2" class="navType" style="padding:20px 20px 0 20px">
        <div class="title2">流程图</div>
        <div style="width:100%;height:400px"></div>
    </div> -->
    </div>
    <lowerPlate></lowerPlate>
    <div class="btns">
        <el-button type="primary">发起上报</el-button>
    </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import formInformationTop from './component/formInformationTop.vue'
import formInformationTops from './component/formInformationTops.vue'
import lowerPlate from './component/lowerPlate.vue'
export default defineComponent({
    components:{lowerPlate,formInformationTop,formInformationTops},
    setup() {
        const activeIndex = ref('1');
        const handleSelect = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath);
            activeIndex.value = key;
        };
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
	
        const router=useRouter()
        const Type=onMounted(()=>{
            console.log("xxxxxxx",router)
        })
		
        return {
            activeIndex,
            handleSelect,
            form,
            router,
            Type
        };
    },
});
</script>
<style scoped>
.title {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
}
.box{
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
    background-color: #fff;
}
.tiao{
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin: 30px 0 ;
    position: relative;
}
.typeS{
    width: 80px;
    background-color: #fff;
    position: absolute;
    left: 30px;
    top: -9px;
    font-size: 14px;
    text-align: center;
}
.logoColor{
    background-color: #67c23a;
    color: #fff;
    padding:  5px 8px;
    border-radius: 5px;
    margin-right: 5px;
}
.btns{
    width: 100%;
    padding:20px 0;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    text-align: center;
    box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
	
}
.title2{
    padding: 20px 0 20px 10px;
    width: 100%;
    border: 1px solid #dcdfe6;
}
</style>

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

@@ -1,264 +0,0 @@
<template>
    <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.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.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.year" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值" size="default">
                        <el-input v-model="form.value" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标分解" name="1">
                <!-- <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button> -->
            </el-tab-pane>
        </el-tabs>
        <el-table :data="formUp.targetDivideDetailList" style="width: 100%">
            <el-table-column align="center" property="dutyDepartmentName" label="责任部门" width="180" />
            <el-table-column align="center" property="value" label="考核指标" width="180" />
            <el-table-column align="center" property="makerDepartmentName" label="制定人部门" />
            <el-table-column align="center" property="makeDate" :formatter="timeDate" label="制定日期" />
            <el-table-column align="center" property="commitPersonName" label="上报人" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="daiAdd('查看', scope.row)">查看</el-button>
                    <el-button link :disabled="disabled" type="primary" @click="daiAdd('修改', scope.row)">考核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <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" @onAdd="add"></DailogAdd>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { timeDate } from '/@/assets/index.ts';
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';
import { emit } from 'process';
import { deepClone } from '/@/utils/other';
export default defineComponent({
    components: { DailogAdd, DailogSearch },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            qName: '',
            indexNum: '',
            year: '',
            value: '',
            targetDivideDetailList: [],
        });
        const targetType = ref();
        const disabled = ref(false);
        const titles = ref();
        const numId=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;
                            formUp.targetDivideDetailList = form.value.targetDivideDetailList;
                            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                                formUp.targetDivideDetailList[i].makeDate=timeC(formUp.targetDivideDetailList[i].makeDate)
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
            numId.value=id
        };
        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m +`:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        const onNumber = (val: object) => {
            form.value = val;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = ref([]);
        // 新增弹窗
        const index = ref<any>();
        const Show = ref();
        const daiAdd = (title: string, data: any) => {
            index.value = formUp.targetDivideDetailList.indexOf(data);
            Show.value.openDailog(title, data);
        };
        const formUp = reactive({
            targetId: '', //关联的目标指标/外键
            delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
            targetDivideDetailList: [], //目标指标分解列表
        });

        const add = (val: any) => {
                goalManagementApi()
                    .getTargetMngDetail(numId.value)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                            formUp.targetDivideDetailList = form.value.targetDivideDetailList;
                            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                                formUp.targetDivideDetailList[i].makeDate=timeC(formUp.targetDivideDetailList[i].makeDate)
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });

            // let obj=JSON.parse(JSON.stringify(form.value))
        };
        // 新增
        const submitForm = () => {
            formUp.delTargetDivideDetails = arr.value.toString();
            formUp.targetId = form.value.id;
            dialogVisible.value = false;
            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                delete formUp.targetDivideDetailList[i].dutyDepartmentName
                delete formUp.targetDivideDetailList[i].makerDepartmentName
            }
            goalManagementApi()
                .gettargetDivideDetail(formUp)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('addList');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        const arr = ref([]);
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog(targetType.value);
        };
        // 关闭
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        // 时间格式处理
        // const timeDate = (data: any) => {
        //     let result = new Date(data).getTime();
        //     return result;
        // };
        return {
            timeC,
            index,
            timeDate,
            arr,
            form,
            dialogVisible,
            openDailog,
            activeName,
            tableData,
            Show,
            daiAdd,
            Shows,
            daiInpt,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
            onNumber,
            targetType,
            disabled,
            resetForm,
            titles,
            add,
            formUp,
            submitForm,
            numId
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

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

@@ -1,281 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable @close="resetForm(ruleFormRef)">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" label-width="120px" ref="ruleFormRef" :rules="rules">
            <!-- <el-row>
                <el-col :span="11">
                    <el-form-item label="责任部门" prop="dutyDepartmentId" size="default">
                        <el-tree-select v-model="form.dutyDepartmentId" check-strictly="true" @current-change="dutyName" :data="data" class="w100" :props="propse" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核指标" prop="examineValue" size="default">
                        <el-input v-model.number="form.examineValue" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="制定人部门" prop="makerDepartmentId" size="default">
                        <el-tree-select v-model="form.makerDepartmentId" :data="data" check-strictly="true"
                                        @current-change="makerDepartmentName" class="w100" :props="propse" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="制定日期" prop="makeDate" size="default">
                        <el-date-picker v-model="form.makeDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="上报值" prop="uploadValue" size="default">
                        <el-input v-model="form.uploadValue">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>
            </el-input>
                    </el-form-item>
                </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="上报时间" prop="uploadDate" size="default">
            <el-date-picker v-model="form.uploadDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-col>
            </el-row> -->
            <el-row>
                <el-col :span="11">
                    <el-form-item label="考核结果" prop="examineResult" size="default">
                        <el-select v-model="form.examineResult" placeholder="请选择" style="width: 100%">
                            <el-option label="合格" :value="1" />
                            <el-option label="不合格" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="考核人" prop="examinePersonName" size="default">
                        <el-input v-model="form.examinePersonName">
                            <template #append> <el-button :icon="Search" @click="openUser" /> </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
        <el-col :span="11">
          <el-form-item label="考核时间" prop="examineDate" size="default">
            <el-date-picker v-model="form.examineDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2"></el-col>
      </el-row> -->
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUser ref="Show" @SearchUser="onUser"></DailogSearchUser>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { DailogSearchUser },
    setup(props, { emit }) {
        const ruleFormRef = ref<FormInstance>();
        const form = ref({
            targetDivideDetailId: "", //关联的目标分解/外键
            examinePersonId: "",
            examinePersonName: '',
            examineResult: "", //考核结果 1:合格 2：不合格
            id: "", //目标指标ID
        });
        //部门
        // const department = () => {
        //     goalManagementApi()
        //         .getTreedepartment()
        //         .then((res) => {
        //             if (res.data.code == 200) {
        //                 data.value = res.data.data;
        //             } else {
        //                 ElMessage.error(res.data.msg);
        //             }
        //         });
        // };
        // const propse = {
        //     label: 'depName',
        //     children: 'children',
        //     value: 'depId',
        // };
        // onMounted(() => {
        //     department();
        // });
        const disabled = ref(false);
        // 开启弹窗
        const titles = ref();
        const dialogVisible = ref(false);
        const openDailog = (title: string, data: any) => {
            titles.value = `${title}目标考核`;
            if (title == '查看') {
                disabled.value = true;
                form.value = data;
                // form.value.id = data.targetId;
                form.value.targetDivideDetailId=data.id
                form.value.examinePersonName = data.examinePersonName;
                form.value.examinePersonId=data.examinePersonId
                form.value.examineResult=data.examineResult
            } else if (title == '修改') {
                console.log(data)
                disabled.value = false;
                // form.value.id = data.targetId;
                form.value.targetDivideDetailId=data.id
                form.value.examinePersonName = data.examinePersonName;
                form.value.examinePersonId=data.examinePersonId
                form.value.examineResult=data.examineResult
            } else {
                disabled.value = false;
            }
            dialogVisible.value = true;
        };
        // 开启用户弹窗
        const Show = ref();
        const openUser = () => {
            Show.value.openDailog();
        };
        const rules = reactive<FormRules>({
            // dutyDepartmentId: [
            //     {
            //         required: true,
            //         message: '责任部门不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // makerDepartmentId: [
            //     {
            //         required: true,
            //         message: '制定人部门不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // commitPersonId: [
            //     {
            //         required: true,
            //         message: '上报人不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            // examineValue: [
            //     {
            //         required: true,
            //         message: '考核指标值不能为空',
            //         trigger: 'blur',
            //     },
            //     {
            //         type: 'number',
            //         message: '考核指标值只能为数字类型',
            //         trigger: 'blur',
            //     },
            // ],
            // makeDate: [
            //     {
            //         required: true,
            //         message: '制定日期不能为空',
            //         trigger: 'blur',
            //     },
            // ],
            examinePersonName: [],
            examineResult:[]

        });
        // const dutyName = (data: any) => {
        //     form.value.dutyDepartmentName = data.depName;
        // };
        // const makerDepartmentName = (data: any) => {
        //     form.value.makerDepartmentName = data.depName;
        // };

        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    console.log(form.value)
                    dialogVisible.value = false;
                    goalManagementApi().gettargetExamineAddOrUpdate(form.value).then(res=>{
                        if(res.data.code==200){
                            ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        }else{
                                ElMessage.error(res.data.msg);
                        }
                    })
                    // handleClose(formEl)
                } else {
                    console.log('error submit!', fields);
                }
            });
            emit('onAdd');
        };

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

 src/views/goalManagement/safetyAssessment/index.vue

@@ -1,241 +0,0 @@
<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.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="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 size="default" type="primary" :icon="Plus" @click="openD('新建')">新建</el-button> -->
                </div>
                <div>
                    <!-- <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-tab-pane label="目标定制(半年)" name="3"></el-tab-pane>
                <el-tab-pane label="目标定制(季度)" name="4"></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="expand">
                    <template #default="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" 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" 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>
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
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 } 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, Dailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '1', ////指标类型 1:年指标 2:月指标
                divideStatus: 1, ////分解状态 1:已分解 2:未分解
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .gettargetExamineList(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 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 onDelete = (id: number) => {
            var arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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 = (title: String, id: number) => {
            openAdd.value.openDailog(title, ruleForm.searchParams.targetType,id);
        };
       const activeNames=ref("1")
        return {
            timeDate,
            activeNames,
            listApi,
            ruleForm,
            resetForm,
            handleClick,
            tableData,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            onAddorUpdata,
            total,
            openAdd,
            openD,
            onDelete,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

 src/views/goalManagement/targetClassification/index.vue

@@ -1,261 +0,0 @@
<template>
    <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 @click="openD('修改', deletAll[0])">修改</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 label="名称" align="center" property="typeName" sortable />
                <el-table-column property="memo" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <DailogClass ref="Show" @onAdd="add"></DailogClass>
    </div>
</template>
<script lang="ts">
import DailogClass from '/@/components/DailogClass/index.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,DailogClass },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                typeName: '', ////分类名称
            },
        });
        // 下方导航与表格
        const tableData = ref([]);
        const currentPage4 = ref();
        const pageSize4 = ref();
        const total = ref();
        // const resetForm = () => {
        //     ruleForm.searchParams.qName = '';
        //     ruleForm.searchParams.indexNum = '';
        //     listApi();
        // };
        const listApi = () => {
            goalManagementApi()
                .gettargetClassList(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 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) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .gettargetClassDelete(arr)
                        .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;
            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()
                        .gettargetClassDelete(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 add = () => {
            listApi();
        };
        return {
            listApi,
            add,
            // 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;
}
.btns {
    padding: 20px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

 src/views/goalManagement/targetDecompositionHalfYear/index.vue

@@ -1,286 +0,0 @@
<template>
    <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
                                @click="openD('修改', deletAll[0])">修改</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="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show" @addList="add"></Dailog>
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.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';
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({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '3', ////指标类型 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 = '';
            listApi()
        };
        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 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) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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
            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 add=()=>{
            listApi()
        }
        return {
            timeDate,
            add,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.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/targetDecompositionMonth/index.vue

@@ -1,286 +0,0 @@
<template>
    <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
                                @click="openD('修改', deletAll[0])">修改</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="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show" @addList="add"></Dailog>
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.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';
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({
            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 = '';
            listApi()
        };
        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 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) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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
            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 add=()=>{
            listApi()
        }
        return {
            timeDate,
            add,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.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/targetDecompositionQuarter/index.vue

@@ -1,286 +0,0 @@
<template>
    <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
                                @click="openD('修改', deletAll[0])">修改</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="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
                                        <el-table-column align="center" prop="commitPersonName" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show" @addList="add"></Dailog>
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.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';
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({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: '4', ////指标类型 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 = '';
            listApi()
        };
        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 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) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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
            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 add=()=>{
            listApi()
        }
        return {
            timeDate,
            add,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.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,262 +0,0 @@
<template>
    <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.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.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.year" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值" size="default">
                        <el-input v-model="form.value" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标分解" name="1">
                <el-button type="primary" size="default" @click="daiAdd('新增')" :disabled="disabled">新增</el-button>
            </el-tab-pane>
        </el-tabs>
        <el-table :data="formUp.targetDivideDetailList" style="width: 100%">
            <el-table-column align="center" property="dutyDepartmentName" label="责任部门" width="180" />
            <el-table-column align="center" property="value" label="考核指标" width="180" />
            <el-table-column align="center" property="makerDepartmentName" label="制定人部门" />
            <el-table-column align="center" property="makeDate" :formatter="timeDate" label="制定日期" />
            <el-table-column align="center" property="commitPersonName" label="上报人" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="daiAdd('查看', scope.row)">查看</el-button>
                    <el-button link :disabled="disabled" type="primary" @click="daiAdd('修改', scope.row)">修改</el-button>
                    <el-button link :disabled="disabled" type="primary" @click="Delete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <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" @onAdd="add"></DailogAdd>
    <DailogSearch ref="Shows" @backNum="onNumber"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { timeDate } from '/@/assets/index.ts';
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';
import { emit } from 'process';
import { deepClone } from '/@/utils/other';
export default defineComponent({
    components: { DailogAdd, DailogSearch },
    setup(props, { emit }) {
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            qName: '',
            indexNum: '',
            year: '',
            value: '',
            targetDivideDetailList: [],
        });
        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;
                            formUp.targetDivideDetailList = form.value.targetDivideDetailList;
                            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                                formUp.targetDivideDetailList[i].makeDate=timeC(formUp.targetDivideDetailList[i].makeDate)
                            }
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
        };
        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m +`:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        const onNumber = (val: object) => {
            form.value = val;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = ref([]);
        // 新增弹窗
        const index = ref<any>();
        const Show = ref();
        const daiAdd = (title: string, data: any) => {
            index.value = formUp.targetDivideDetailList.indexOf(data);
            Show.value.openDailog(title, data);
        };
        const formUp = reactive({
            targetId: '', //关联的目标指标/外键
            delTargetDivideDetails: '', //要删除的目标指标分解ID,多个用逗号隔开
            targetDivideDetailList: [], //目标指标分解列表
        });

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

            // let obj=JSON.parse(JSON.stringify(form.value))
        };
        // 新增
        const submitForm = () => {
            formUp.delTargetDivideDetails = arr.value.toString();
            formUp.targetId = form.value.id;
            dialogVisible.value = false;
            for(let i=0;i<formUp.targetDivideDetailList.length;i++){
                delete formUp.targetDivideDetailList[i].dutyDepartmentName
                delete formUp.targetDivideDetailList[i].makerDepartmentName
            }
            goalManagementApi()
                .gettargetDivideDetail(formUp)
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: res.data.msg,
                            type: 'success',
                        });
                        emit('addList');
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        const arr = ref([]);
        // 删除
        const Delete = (data: any) => {
            formUp.targetDivideDetailList.splice(form.value.targetDivideDetailList.indexOf(data), 1);
            formUp.targetId = data.targetId;
            arr.value.push(data.id);
        };
        // 安全目标指标弹窗
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog(targetType.value);
        };
        // 关闭
        const resetForm = () => {
            dialogVisible.value = false;
            form.value = {
                qName: '',
                indexNum: '',
                year: '',
                value: '',
                targetDivideDetailList: [],
            };
            tableData.value = [];
            formUp.targetId = '';
            formUp.delTargetDivideDetails = '';
            formUp.targetDivideDetailList = [];
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        // 时间格式处理
        // const timeDate = (data: any) => {
        //     let result = new Date(data).getTime();
        //     return result;
        // };
        return {
            timeC,
            index,
            timeDate,
            arr,
            form,
            dialogVisible,
            openDailog,
            activeName,
            tableData,
            Show,
            daiAdd,
            Shows,
            daiInpt,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
            onNumber,
            targetType,
            disabled,
            resetForm,
            titles,
            add,
            formUp,
            submitForm,
            Delete,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

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

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

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

 src/views/goalManagement/targetDecompositionYear/index.vue

@@ -1,284 +0,0 @@
<template>
    <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
                                @click="openD('修改', deletAll[0])">修改</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="scope">
                        <div class="tableC">
                            <el-tabs v-model="activeNames">
                                <el-tab-pane label="目标指标分解" name="1">
                                    <el-table :data="scope.row.targetDivideDetailList" style="width: 100%">
                                        <el-table-column align="center" prop="dutyDepartmentName" label="责任部门" />
                                        <el-table-column align="center" prop="value" label="考核指标" />
                                        <el-table-column align="center" prop="makerDepartmentName" label="制定人部门" />
                                        <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期"  />
                                        <el-table-column align="center" prop="commitPersonName" 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="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <Dailog ref="Show" @addList="add"></Dailog>
    </div>
</template>
<script lang="ts">
import { timeDate } from '/@/assets/index.ts';
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, 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 = '';
            listApi()
        };
        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 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) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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
            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 add=()=>{
            listApi()
        }
        return {
            timeDate,
            listApi,
            add,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
.tableC {
    margin: 0 10%;
}
</style>

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

@@ -1,65 +0,0 @@
<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-table :data="tableData" style="width: 100%">
            <el-table-column property="workName" label="审批人"  sortable></el-table-column>
            <el-table-column property="title" label="审批标题"  sortable></el-table-column>
            <el-table-column property="approvePersonName" label="编写人" sortable></el-table-column>
            <el-table-column property="approveMemo" label="审批意见"  sortable></el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <!-- <el-button type="primary" @click="dialogVisible = false">确定</el-button> -->
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { FullScreen } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup() {
        const dialogVisible = ref(false);
        const form = ref({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                relateId: '', ////检查记录ID
                relateType:"",
                gmtCreate:[],
            },
        });
        const tableData = ref();
        const openDailog = (data: any,type:number) => {
            dialogVisible.value = true;
            form.value.searchParams.relateId=data
            form.value.searchParams.relateType=type
            goalManagementApi().getworkApproveListCode(form.value).then(res=>{
                if(res.data.code==200){
                    tableData.value=res.data.data
                }
            })
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            tableData,
            openDailog,
            full,
            toggleFullscreen,
            form,
            FullScreen,
        };
    },
});
</script>

 src/views/goalManagement/targetEscalation/component/TypeDailog.vue

@@ -1,341 +0,0 @@
<template>
    <el-dialog :title="titleName" v-model="dialogVisible" @click="resetForm" width="70%" draggable :fullscreen="full" :close-on-click-modal="false">
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form ref="ruleFormRef" :model="form" size="default" :disabled="disabled" label-width="120px">
            <div v-if="titleName == '发起审批'">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="审批名称" prop="workName" size="default">
                            <el-input v-model="form.workName" :disabled="disabledT" placeholder="请填写名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="审批标题" prop="title" size="default">
                            <el-input v-model="form.title" :disabled="disabledT" placeholder="请填写标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="审批人" prop="approvePersonId" size="default">
                            <el-input v-model="form.approvePersonName" :disabled="disabledT" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2"></el-col>
                </el-row>
            </div>
            <div v-if="titleName != '发起审批'">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="审批名称" prop="workName" size="default">
                            <el-input v-model="formUp.workName" :disabled="disabledT" placeholder="请填写名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <el-form-item label="审批标题" prop="title" size="default">
                            <el-input v-model="formUp.title" :disabled="disabledT" placeholder="请填写标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="审批人" prop="approvePersonId" size="default">
                            <el-input v-model="formUp.approvePersonName" :disabled="disabledT" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" :offset="2"></el-col>
                </el-row>
            </div>
            <el-table :data="tableData" style="width: 90%;margin:20px auto">
            <el-table-column align="center" type="index" label="序号" width="80" />
            <el-table-column align="center" prop="makerDepartmentName" label="责任部门" />
            <el-table-column align="center" prop="value" label="考核指标" />
            <el-table-column align="center" prop="dutyDepartmentName" label="制定部门" />
            <el-table-column align="center" prop="makeDate" :formatter="timeDate" label="制定日期" />
            <el-table-column align="center" label="检查值">
                <template #default="scope">
                    <el-input v-model="scope.row.commitValue" :disabled="disabledType" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="检查人">
                <template #default="scope">
                    <el-input v-model="scope.row.personName" :disabled="disabledType">
                        <template #append> <el-button :icon="Search" @click="openUsers(scope.row)" /> </template
                    ></el-input>
                </template>
            </el-table-column>
        </el-table>
            <div v-if="typeScope">
                <el-row>
                    <el-col>
                        <el-form-item label="审批结果" prop="authorUid">
                            <el-radio-group :disabled="disabled" v-model="form.approveResult">
                                <el-radio :label="0">不通过</el-radio>
                                <el-radio :label="1">通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="审批意见" prop="approveMemo">
                            <el-input v-model="form.approveMemo" :disabled="disabled" type="textarea" placeholder="请填写审批意见"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="是否完成" prop="complete">
                            <el-radio-group v-model="form.approveStatus" :disabled="disabled">
                                <el-radio :label="3">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-if="form.approveStatus == 2">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="审批名称" prop="workName" size="default">
                                <el-input v-model="form.workName" placeholder="请填写名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="2">
                            <el-form-item label="审批标题" prop="title" size="default">
                                <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="审批人" prop="approvePersonId" size="default">
                                <el-input v-model="form.approvePersonName" placeholder="请选择" class="input-with-select">
                                    <template #append>
                                        <el-button :icon="Search" @click="openUser" />
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="2"></el-col>
                    </el-row>
                </div>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm" size="default">关闭</el-button>
                <el-button size="default" type="primary" :disabled="disabled" @click="submitForm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <DailogSearchUserManger ref="userRef" @SearchUser="onUser" />
    <DailogSearchUser ref="Show" @SearchUser="onUsers"></DailogSearchUser>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue';
import { timeDate } from '/@/assets/index.ts';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import { ElMessage } from 'element-plus';
import DailogSearchUser from '../../../../components/DailogSearchUser/index.vue';
import { goalManagementApi } from '/@/api/goalManagement';
import { Search, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    components: { DailogSearchUserManger, DailogSearchUser },
    setup(props, { emit }) {
        const dialogVisible = ref(false);
        const form = ref({
            workName: '', // 审批名称
            title: '', //审批标题
            approvePersonId: '',
            approvePersonName: '',
            approveStatus: "",
            approveResult: '',
            relateType: 1,
            relateId: '',
            relateDesc: '',
        });
        // 提交
        const submitForm = () => {
            if (titleName.value == '发起审批') {
                    let arr = [];
            for (let i = 0; i < tableData.value.length; i++) {
                arr.push({
                    id: tableData.value[i].id,
                    value: tableData.value[i].commitValue,
                    personName: tableData.value[i].personName,
                    personId: tableData.value[i].personId,
                });
            }
            form.value.approveStatus=2
            form.value.relateDesc = JSON.stringify(arr);
                goalManagementApi()
                    .getworkApproveAdd(form.value)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ElMessage({
                                showClose: true,
                                message: res.data.msg,
                                type: 'success',
                            });
                            emit('onType');
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            } else if (titleName.value == '审批') {
                goalManagementApi()
                    .getworkApproveUpdata(form.value)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ElMessage({
                                showClose: true,
                                message: res.data.msg,
                                type: 'success',
                            });
                            emit('onType');
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            }
            dialogVisible.value = false;
            disabled.value = false;
            disabledT.value = false;
            form.value = {};
            formUp.value = {};
        };
        // 关闭
        const resetForm = () => {
            disabled.value = false;
            disabledT.value = false;
            form.value = {};
            formUp.value = {};
            tableData.value=[];
            dialogVisible.value = false;	
        };
        const titleName = ref();
        const typeScope = ref();
        const disabledT = ref(false);
        const disabled = ref(false);
        const formUp = ref({
            workName: '',
            title: '',
            approvePersonName: '',
        });
        const tableData = ref([]);
        const disabledType=ref()
        // 打开弹窗
        const openDialog = (title: string, name: any, id: number, type: number,data:any) => {
            dialogVisible.value = true;
            titleName.value = title;
            form.value.relateType = type;
            if (title == '发起审批') {
                form.value.relateId = id;
                typeScope.value = false;
                goalManagementApi()
                    .getTargetMngDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            tableData.value = res.data.data.targetDivideDetailList;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
                    disabledType.value=false
            } else if (title == '审批' || title == '查看审批') {
                goalManagementApi()
                    .getworkApproveDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                                if (data.approveStatus==2&&data.checkApprove==true){
                                disabled.value = false;
                            } else if(data.approveStatus==2&&data.checkApprove==false) {
                                disabled.value = true;
                            }
                            form.value = res.data.data;
                            form.value.approveStatus = '';
                            formUp.value.workName = form.value.workName;
                            formUp.value.title = form.value.title;
                            formUp.value.approvePersonName = form.value.approvePersonName;
                            form.value.workName=""
                            form.value.title=""
                            form.value.approvePersonName=""
                            tableData.value=res.data.data.targetDivideDetailList
                            console.log(form.value.approvePersonName)
                        }
                    });
                    disabledType.value=true
                typeScope.value = true;
                disabledT.value = true;
            }
        };
        // 打开用户选择弹窗
        const userRef = ref();
        const openUser = () => {
            userRef.value.openDailog();
        };
        const index = ref();
        const Show = ref();
        const openUsers = (id: any) => {
            index.value = tableData.value.indexOf(id);
            Show.value.openDailog();
        };
        const onUser = (val: any) => {
            form.value.approvePersonId = val[0].uid;
            form.value.approvePersonName = val[0].realName;
        };
        const onUsers = (val: any) => {
            tableData.value[index.value].personName = val.realName;
            tableData.value[index.value].personId = val.uid;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            disabledType,
            index,
            Show,
            onUsers,
            openUsers,
            formUp,
            timeDate,
            tableData,
            onUser,
            dialogVisible,
            form,
            disabledT,
            submitForm,
            resetForm,
            titleName,
            typeScope,
            disabled,
            openDialog,
            userRef,
            openUser,
            full,
            toggleFullscreen,
            Search,
            FullScreen,
        };
    },
});
</script>
<style>
.el-row {
    padding-bottom: 20px;
}
</style>

 src/views/goalManagement/targetEscalation/index.vue

@@ -1,199 +0,0 @@
<template>
    <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-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="scope">
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==null" @click="TypeDailog('发起审批','检查',scope.row.id,1)">发起审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==2&&scope.row.checkApprove==true"  @click="TypeDailog('审批',scope.row.id,scope.row.approveId,1,scope.row)">审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==2&&scope.row.checkApprove==false" @click="TypeDailog('查看审批',scope.row.id,scope.row.approveId,1,scope.row)">查看审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==3" @click="openDai(scope.row.id,1)" >查看审批流程</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName == 2" label="操作" align="center" show-overflow-tooltip>
                    <template #default="scope">
                            <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==null" @click="TypeDailog('发起审批','检查',scope.row.id,2)">发起审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==2&&scope.row.checkApprove==true"  @click="TypeDailog('审批',scope.row.id,scope.row.approveId,2,scope.row)">审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==2&&scope.row.checkApprove==false" @click="TypeDailog('查看审批',scope.row.id,scope.row.approveId,2,scope.row)">查看审批</el-button>
                        <el-button link type="primary" size="default" :icon="EditPen" v-if="scope.row.approveStatus==3" @click="openDai(scope.row.id,2)" >查看审批流程</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>
        </div>
        <Dailog ref="Show"></Dailog>
        <TypeDailog ref="TypeD" @onType="typeAlign" />
    </div>
</template>
<script lang="ts">
import Dailog from './component/Dailog.vue';
import TypeDailog from './component/TypeDailog.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';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    components: { ElButton, ElInput, Dailog,TypeDailog },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                qName: '', ////安全目标指标
                indexNum: '', ////目标指标编号
                targetType: 1, ////指标类型 1:年指标 2:月指标
                divideStatus: 1, ////分解状态 1:已分解 2:未分解
                relateType: 1, ////关联业务类型 1:目标检查 2:目标上报
            },
        });
        // 重置
        const resetForm = () => {
            ruleForm.searchParams.qName = '';
            ruleForm.searchParams.indexNum = '';
        };
        const listApi = () => {
            goalManagementApi()
                .getworkApproveList(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.relateType = val.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`);
            ruleForm.pageSize = val;
            listApi();
        };
        const handleCurrentChange = (val: number) => {
            // console.log(`current page: ${val}`);
            ruleForm.pageIndex = val;
            listApi();
        };
        const activeName = ref<any>('1');
        // 记录弹窗
        const Show = ref();
        const openDai = (data: any,num:number) => {
            Show.value.openDailog(data,num);
        };
        // 发起审批弹窗
        const TypeD = ref();
        const TypeDailog = (title:string,name:string,id:number,type:number,data:any) => {
            TypeD.value.openDialog(title,name,id,type,data);
        };
        const typeAlign=()=>{
            listApi();
        }
        return {
            TypeD,
            typeAlign,
            TypeDailog,
            activeName,
            total,
            handleClick,
            ruleForm,
            listApi,
            onAddorUpdata,
            tableData,
            resetForm,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            Show,
            openDai,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/targetImprovements/component/Dailogprove.vue

@@ -1,105 +0,0 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="Tips" width="50%" :before-close="handleClose">
        <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>
                    </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>
                </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>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="责任部门" size="default">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="改进期限" size="default">
                        <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2" >
                    <el-form-item label="发起人" size="default">
                        <el-input v-model="model"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="发起时间" size="default">
                        <el-date-picker v-model="form.date1" type="date" placeholder="选择日期时间" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="目标指标" name="first"></el-tab-pane>
        </el-tabs>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Plus, Delete, Upload, Download, Refresh, View, Search, FullScreen } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const dialogVisible = ref(false);
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        const openDailog = () => {
            dialogVisible.value = true;
        };
        const activeName = ref('first');
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            dialogVisible,
            form,
            openDailog,
            activeName,
            Search,
            full,
            toggleFullscreen,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 src/views/goalManagement/targetImprovements/index.vue

@@ -1,307 +0,0 @@
<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-button type="primary" size="default" @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-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="发起改进" name="1">
                <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 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" width="200" 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>
            </el-tab-pane>
            <el-tab-pane label="整改" name="2">
                <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 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" width="200" sortable show-overflow-tooltip>
                        <template #default>
                            <el-button link type="primary" size="default" :icon="View" @click="openDai">查看</el-button>
                            <el-button link type="primary" size="default" :icon="Delete" @click="jump">整改上报</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-tab-pane>
            <el-tab-pane label="验证" name="3">
                <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 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" width="200" 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>
            </el-tab-pane>
            <el-tab-pane label="完成" name="4">
                <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 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" width="200" 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>
            </el-tab-pane>
        </el-tabs>
    </div>
    <Dailogprove ref="Show"></Dailogprove>
    </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 Dailogprove from './component/Dailogprove.vue';
import { useRouter } from 'vue-router';
export default defineComponent({
    components: { ElButton, ElInput,Dailogprove},
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        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 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 Show=ref()
        const openDai=()=>{
            Show.value.openDailog()
        }
        const router=useRouter()
        const jump=()=>{
       router.push({
           path:"/processForms"
       })
        }
        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Show,
            router,
            jump,
            openDai,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

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

@@ -1,284 +0,0 @@
<template>
    <el-dialog v-model="Shows" @close="handleClose(ruleFormRef)" :fullscreen="full" :title="titles" width="50%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-form :model="form" :disabled="disabled" ref="ruleFormRef" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <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="目标编号" 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="年度" prop="year" size="default">
                        <el-input v-model.number="form.year" maxlength="8" placeholder="请填写年度" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值" prop="value" size="default">
                        <el-input v-model.number="form.value" placeholder="请填写指标值">
                            <template #prepend>
                                <el-select v-model="form.valueSign " placeholder="请选择" style="width: 115px">
                                    <el-option label="大于" :value="1" />
                                    <el-option label="等于" :value="2" />
                                    <el-option label="小于" :value="3" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="指标级别" size="default" prop="level">
                        <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" prop="completeDate">
                        <el-date-picker
                            v-model="form.completeDate"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="请选择"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="目标制定部门" size="default" prop="">
                        <el-tree-select
                            v-model="form.makerDepartmentId"
                            :data="data"
                            @current-change="makerName"
                            check-strictly="true"
                            class="w100"
                            :props="propse"
                            placeholder="请选择"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2"> </el-col>
            </el-row>
            <el-form-item label="备注信息" prop="memo">
                <el-input v-model="form.memo" size="default" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <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>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
// import { timeDate } from '/@/assets/index.ts';
import screenfull from 'screenfull';
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, { emit }) {
        let Shows = ref(false);
        const ruleFormRef = ref<FormInstance>();
        const form = ref({
            indexNum: '', //目标指标编号
            qName: '', //安全目标指标
            year: '', //年度
            level: '', ////指标级别 1:公司级 2:部门分厂级 3:工段班组级
            memo: '', ////备注信息
            targetType: '', ////指标类型 1:年指标 2:月指标
            completeDate: '', ////完成期限
            divideStatus: '2', ////分解状态 1:已分解 2:未分解
            value: '', ////指标值
            makerDepartmentId: '',
            valueSign:""
        });
        const titles = ref();
        const disabled = ref(false);
        const titleT = ref();
        // 打开弹窗
        const openDialog = (title: string, value: any, id: number) => {
            department();
            Shows.value = true;
            titleT.value = title;
            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;
                            form.value.completeDate = timeC(form.value.completeDate);
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
        };
        const timeC = (timestamp: any) => {
            let a = new Date(timestamp).getTime();
            const date = new Date(a);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            const s = date.getSeconds(); // 秒
            const dateString = Y + M + D + h + m + `:${s}`;
            // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
            return dateString;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                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',
                },
                {
                    type: 'number',
                    message: '指标值只能为数字类型',
                    trigger: 'change',
                },
            ],
            level: [],
            completeDate: [],
            memo: [],
        });
        // 提交
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    if (titleT.value == '新建') {
                        delete form.value.id;
                    }
                    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();
                            }
                        });
                    formEl.resetFields();
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
        //   取消
        const resetForm = (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            formEl.resetFields();
            Shows.value = false;
        };
        const handleClose = (formEl: FormInstance | undefined) => {
            formEl.resetFields();
        };
        //部门
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        const data = ref();
        const makerName = (data: any) => {
            form.value.makerDepartmentName = data.depName;
        };
        return {
            department,
            propse,
            data,
            makerName,
            timeC,
            openDialog,
            handleClose,
            titles,
            titleT,
            // timeDate,
            Shows,
            form,
            full,
            disabled,
            toggleFullscreen,
            rules,
            ruleFormRef,
            submitForm,
            resetForm,
            FullScreen,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

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

@@ -1,52 +0,0 @@
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.pass" size="default" placeholder="安全目标指标" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.checkPass" size="default" placeholder="目标指标编号" />
                </el-form-item>
            </el-col>
            <el-col :span="16">
                <el-form-item>
                    <el-button type="primary" size="default" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button size="default" @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script lang="ts">
import { ref, reactive, defineComponent } from 'vue';
import {
  FormInstance,
} from "element-plus";
export default defineComponent({
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        const resetForm = (formEl: FormInstance | undefined) => {
      console.log(!formEl);
      if (!formEl) return;
      formEl.resetFields();
    };
        return {
            ruleForm,
            resetForm
        };
    },
});
</script>
<style scoped>
  .topTitle {
  background-color: #fff;
  padding: 20px 0px 20px 0px;
}
</style>

 src/views/goalManagement/targetSettings/index.vue

@@ -1,300 +0,0 @@
<template>
    <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-tab-pane label="目标定制(半年)" name="3"></el-tab-pane>
                <el-tab-pane label="目标定制(季度)" name="4"></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" :formatter="timeDate" 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 {timeDate} from '/@/assets/index.ts'
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 },
    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 = '';
            listApi()
        };
        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) => {
            let arr=[]
            arr.push(id)
            ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    goalManagementApi()
                        .getTargetMngDelete(arr)
                        .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
            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 {
            timeDate,
            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;
}
.btns {
    padding: 0px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/targetStatistics/index.vue

@@ -1,92 +0,0 @@
<template>
    <div style="background-color: #fff">
      <h2 style="line-height:40px;text-align: center;padding: 20px 0;">目标完成情况统计</h2>
        <el-row style="padding:20px 0">
            <el-col :span="4" :offset="17">
                <el-select v-model="form.targetType" placeholder="" @change="listApi" style="width:100%">
                    <el-option label="年指标" :value="1" />
                    <el-option label="月指标" :value="2" />
                    <el-option label="半年" :value="3" />
                    <el-option label="季度" :value="4" />
                </el-select>
            </el-col>
        </el-row>
        <div ref="main" style="width: 100%; height: 450px;"></div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
    setup() {
        const form = ref({
            qName: '',
            indexNum: '',
            targetType: 1,
            divideStatus: '',
        });
        onMounted(() => {
            listApi();
        });
        const listApi = () => {
            goalManagementApi()
                .gettargetstatistics(form.value.targetType)
                .then((res) => {
                    let arr = [];
                    arr.push({
                        value: res.data.data.noComplete,
                        name: '未完成',
                    });
                    arr.push({
                        value: res.data.data.complete,
                        name: '已完成',
                    });
                    init(arr);
                });
        };
        const main = ref();
        const init = (data: any) => {
            var myChart = echarts.init(main.value);
            var option = {
                // title: {
                //     text: 'Referer of a Website',
                //     subtext: 'Fake Data',
                //     left: 'center',
                // },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    orient: 'vertical',
                    left: '30%',
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '90%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            };

            myChart.setOption(option);
        };
        return {
            form,
            main,
            init,
            listApi,
        };
    },
});
</script>