更新

Your Name

2023-02-24 5a72942254d0a4cae77c2980b014a5cf55a52cf9

更新

 .env

@@ -16,4 +16,4 @@
#VITE_PUBLIC_PATH = 'http://121.239.169.27:6006'

#国泰线上试用环境
VITE_PUBLIC_PATH = 'http://121.239.169.27:6622'
VITE_PUBLIC_PATH = 'http://121.239.169.27:7000'

 .env.development

@@ -4,7 +4,7 @@
#VITE_API_URL = 'http://192.168.0.35:8008'
#李宇飞接口地址

VITE_API_URL = 'http://192.168.0.22:8084'
#VITE_API_URL = 'http://192.168.0.22:8084'
#张凤接口地址

#VITE_API_URL = 'http://192.168.0.29:8008'
@@ -13,7 +13,7 @@
#VITE_API_URL = 'http://192.168.0.5:8084'
#施正红接口地址

#VITE_API_URL = 'http://192.168.0.18:8084'
VITE_API_URL = 'http://192.168.0.18:8084'
#戚会山接口地址

#VITE_API_URL = 'http://121.239.169.27:16006/safeplatform'

 .env.production

@@ -17,6 +17,6 @@
#VITE_API_URL_SOCKET = 'http://121.239.169.27:16006/safeplatform'

# 国泰线上试用环境接口地址
VITE_API_URL = 'http://121.239.169.27:16016/safeplatform'
VITE_API_URL = 'http://121.239.169.27:16070'
VITE_API_URL_OUT = 'http://121.239.169.27:16016/safeplatform-out'
VITE_API_URL_SOCKET = 'http://121.239.169.27:16016/safeplatform'

 src/api/analyse/evaluate/index.ts

对比新文件
@@ -0,0 +1,39 @@
import request from '/@/utils/request';

export function evaluateApi() {
    return {
        addEvaluate: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/evaluate',
                method: 'post',
                data: params
            });
        },


        modEvaluate: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/updateEvaluate',
                method: 'post',
                data: params
            });
        },

        deleteEvaluateById: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/delete/deleteIdentification',
                method: 'post',
                data: params
            });
        },

        submitEvaluate: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/evaluateSubmit',
                method: 'post',
                data: params
            });
        },

    };
}

 src/api/analyse/identify/index.ts

对比新文件
@@ -0,0 +1,47 @@
import request from '/@/utils/request';

export function identifyApi() {
    return {
        getIdentifyByList: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/select/selectAssessPage',
                method: 'post',
                data: params
            });
        },

        addIdentify: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/identification',
                method: 'post',
                data: params
            });
        },


        modIdentify: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/updateIdentification',
                method: 'post',
                data: params
            });
        },

        deleteIdentifyById: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/delete/deleteIdentification',
                method: 'post',
                data: params
            });
        },

        submitIdentify: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/identificationSubmit',
                method: 'post',
                data: params
            });
        },

    };
}

 src/api/analyse/plan/index.ts

对比新文件
@@ -0,0 +1,53 @@
import request from '/@/utils/request';

export function planApi() {
    return {
        getPlanByList: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/select/selectAssessPlanPage',
                method: 'post',
                data: params
            });
        },

        addPlan: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/insert/insertAssessPlan',
                method: 'post',
                data: params
            });
        },


        modPlan: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/updateAssessPlan',
                method: 'post',
                data: params
            });
        },

        deletePlanById: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/delete/deleteAssessPlan',
                method: 'post',
                data: params
            });
        },

        sellAssessPlan: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/sellAssessPlan',
                method: 'post',
                data: params
            });
        },

        getAllPlan: () => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/select/listAssessPlan',
                method: 'get',
            });
        },
    };
}

 src/api/analyse/riskUnit/index.ts

对比新文件
@@ -0,0 +1,52 @@
import request from '/@/utils/request';

export function riskUnitApi() {
    return {
        getRiskUnitByList: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/select/selectRiskUnitPage',
                method: 'post',
                data: params
            });
        },

        addRiskUnit: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/insert/insertRiskUnit',
                method: 'post',
                data: params
            });
        },

        addBasicRiskUnit: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/insert/insertInherentRiskUnit',
                method: 'post',
                data: params
            });
        },

        modRiskUnit: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/update/updateRiskUnit',
                method: 'post',
                data: params
            });
        },

        deleteRiskUnitById: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/delete/deleteRiskUnit',
                method: 'post',
                data: params
            });
        },

        getAllRiskUnit: () => {
            return request({
                url: import.meta.env.VITE_API_URL + '/risk/select/listRiskUnit',
                method: 'get',
            });
        },
    };
}

 src/api/basic/unit/index.ts

@@ -34,5 +34,12 @@
            });
        },

        getAllUnit: () => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/select/listRiskUnit',
                method: 'get',
            });
        },

    };
}

 src/api/experiment/project/index.ts

@@ -50,5 +50,12 @@
            });
        },

        getAllExperiment: () => {
            return request({
                url: import.meta.env.VITE_API_URL + '/experimentInfo/list',
                method: 'get',
            });
        },

    };
}

 src/api/login/index.ts

@@ -18,8 +18,8 @@
        // v1
        signOut: () => {
            return request({
                url: import.meta.env.VITE_API_URL + '/auth/logout',
                method: 'post'
                url: import.meta.env.VITE_API_URL + '/account/auth/logout',
                method: 'get'
            });
        },
        // 更改密码

 src/api/systemManage/role/index.ts

@@ -12,7 +12,7 @@
        // v2
        addRole: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/role/add`,
                url: import.meta.env.VITE_API_URL + `/account/role/new`,
                method: 'post',
                data: data
            });
@@ -20,7 +20,7 @@
        // v2
        modRole: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/role/mod`,
                url: import.meta.env.VITE_API_URL + `/account/role/mod/name`,
                method: 'post',
                data: data
            });
@@ -28,7 +28,7 @@
        // v2
        deleteRole: (value?: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/role/del`,
                url: import.meta.env.VITE_API_URL + `/account/role/del`,
                method: 'post',
                data: value
            });

 src/api/systemManage/user/index.ts

@@ -5,7 +5,7 @@
        // v1
        getUserList: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/page/list`,
                url: import.meta.env.VITE_API_URL + `/account/user/find/list/roleId`,
                method: 'post',
                data: data
            });
@@ -13,7 +13,7 @@
        // v1
        addUser: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/add`,
                url: import.meta.env.VITE_API_URL + `/account/user/add`,
                method: 'post',
                data: data
            });
@@ -29,7 +29,7 @@
        // v1
        deleteUser: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/del`,
                url: import.meta.env.VITE_API_URL + `/account/user/deleteUser`,
                method: 'post',
                data: data
            });

 src/assets/index.ts

@@ -14,4 +14,4 @@
        // 拼接
        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }
}
}

 src/layout/navBars/breadcrumb/user.vue

@@ -176,7 +176,7 @@
                })
                    .then(async () => {
                        let res = await useLoginApi().signOut();
                        if (res.data.code === '200') {
                        if (res.data.code === 100) {
                            Session.clear(); // 清除缓存/token等
                            // 使用 reload 时，不需要调用 resetRoute() 重置路由
                            window.location.reload();

 src/utils/methods.ts

对比新文件
@@ -0,0 +1,19 @@
export const isValidKey = (key: string | number | symbol, object:object): key is keyof typeof object =>{
    return key in object;
};

export function numFloat(...args: any){
    let numTen = 1
    let numTotal = 1
    for(let i of args){
        if( i === null){
            numTotal = numTotal * 1
        }else if(i.toString().indexOf('.') === -1){
            numTotal = numTotal * Number(i)
        }else{
            numTotal = numTotal * Number(i.toString().split('.')[0] + i.toString().split('.')[1])
            numTen = numTen * Math.pow(10,i.toString().split('.')[1].length)
        }
    }
    return numTotal / numTen
}

 src/views/analyse/evaluate/components/evaluateDialog.vue

对比新文件
@@ -0,0 +1,332 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="evaluateDialogState.title" v-model="evaluateDialogState.evaluateDialogVisible" width="600px">
            <el-form ref="evaluateFormRef" :rules="evaluateDialogState.evaluateFormRules" :model="evaluateDialogState.evaluateForm" size="default" label-width="140px">
                <el-row :gutter="35">
<!--                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
<!--                        <el-form-item label="评估计划" prop="id">-->
<!--                            <el-select class="input-length" :disabled="true" v-model="evaluateDialogState.evaluateForm.id" style="width:100%" placeholder="评估计划" clearable>-->
<!--                                <el-option v-for="item in evaluateDialogState.planList" :key="item.id" :label="item.assessPlanName" :value="item.id"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">-->
<!--                        <el-form-item label="风险数值" prop="riskValue">-->
<!--                            <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.riskValue" style="width:100%" 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="riskLevelValue">
                            <el-select class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.riskLevelValue" style="width:100%" placeholder="风险等级" clearable>
                                <el-option v-for="item in evaluateDialogState.riskLevelValueList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险级别" prop="riskLevel">
                            <el-select class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.riskLevel" style="width:100%" placeholder="风险级别" clearable>
                                <el-option v-for="item in evaluateDialogState.riskLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险色" prop="riskColor">
                            <el-select class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.riskColor" style="width:100%" placeholder="风险色" clearable>
                                <el-option v-for="item in evaluateDialogState.riskColorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="管理层级" prop="manageLevel">
                            <el-select class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.manageLevel" style="width:100%" placeholder="管理层级" clearable>
                                <el-option v-for="item in evaluateDialogState.manageLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评价方法" prop="identificationMethod">
                            <el-select class="input-length" :disabled="true" v-model="evaluateDialogState.evaluateMethod" style="width:100%" placeholder="评价方法" clearable>
                                <el-option v-for="item in evaluateDialogState.evaluateMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <div style="width: 100%" v-if="evaluateDialogState.evaluateMethod === 1">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="LEC_L" prop="lecL">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.lecL" placeholder="LEC_L" clearable></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="LEC_E" prop="lecE">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.lecE" placeholder="LEC_E" clearable></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="LEC_C" prop="lecC">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.lecC" placeholder="LEC_C" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="evaluateDialogState.evaluateMethod === 2">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="LS_L" prop="lsL">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.lsL" placeholder="LS_L    " clearable></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="LS_S" prop="lsS">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.lsS" placeholder="LS_S" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="evaluateDialogState.evaluateMethod === 3">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="MES_M" prop="mesM">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.mesM" placeholder="MES_M" clearable></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="MES_E" prop="mesE">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.mesE" placeholder="MES_E" clearable></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="MES_S" prop="mesS">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.mesS" placeholder="MES_S" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="evaluateDialogState.evaluateMethod === 4">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="RS_R" prop="rsR">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.rsR" placeholder="RS_R" clearable></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="RS_S" prop="rsS">
                                <el-input type="number" class="input-length" :disabled="evaluateDialogState.disabled" v-model="evaluateDialogState.evaluateForm.rsS" placeholder="RS_S" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险数值" prop="rsS">
                            <el-input type="number" class="input-length" :disabled="true" v-model="numValue" placeholder="风险数值" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="evaluateDialogState.evaluateDialogVisible = !evaluateDialogState.evaluateDialogVisible" size="default">取 消</el-button>
                    <el-button v-if="!evaluateDialogState.disabled" type="primary" @click="onSubmitEvaluate" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {evaluateApi} from "/@/api/analyse/evaluate";
import {isValidKey, numFloat} from "/@/utils/methods";

const evaluateFormRef = ref()

const evaluateDialogState = reactive<EvaluateDialogType>({
    title: '',
    time:[],
    disabled: false,
    evaluateDialogVisible: false,
    evaluateMethod: 1,
    evaluateForm: {
        id: null,
        identificationId: null,
        riskValue: null,
        riskLevelValue: null,
        riskLevel: null,
        riskColor: null,
        manageLevel: null,
        lecL: null,
        lecE: null,
        lecC: null,
        lsL: null,
        lsS: null,
        mesM: null,
        mesE: null,
        mesS: null,
        rsR: null,
        rsS: null,
        lecId: null,
        lsId: null,
        mesId: null,
        rsId: null,
    },
    evaluateFormRules: {

    },
    manageLevelList: [
        {id:1, name: '院所级'},
        {id:2, name: '部门级'},
        {id:3, name: '项目组级'},
    ],
    riskColorList: [
        {id:1, name: '蓝色'},
        {id:2, name: '黄色'},
        {id:3, name: '橙色'},
        {id:4, name: '红色'},
    ],
    riskLevelList: [
        {id:1, name: '低'},
        {id:2, name: '一般'},
        {id:3, name: '较大'},
        {id:4, name: '重大'},
    ],
    riskLevelValueList: [
        {id:1, name: '1级'},
        {id:2, name: '2级'},
        {id:3, name: '3级'},
        {id:4, name: '4级'},
        {id:5, name: '5级'},
    ],
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    evaluateMethodList: [
        {id:1, name: 'LEC'},
        {id:2, name: 'LS'},
        {id:3, name: 'MES'},
        {id:4, name: 'RS'},
    ]
})

const numValue = computed( () => {
    return numFloat(
        evaluateDialogState.evaluateForm.lecE,
        evaluateDialogState.evaluateForm.lecL,
        evaluateDialogState.evaluateForm.lecC,
        evaluateDialogState.evaluateForm.mesE,
        evaluateDialogState.evaluateForm.mesM,
        evaluateDialogState.evaluateForm.mesS,
        evaluateDialogState.evaluateForm.rsS,
        evaluateDialogState.evaluateForm.rsR,
        evaluateDialogState.evaluateForm.lsS,
        evaluateDialogState.evaluateForm.lsL)
})

const showEvaluateDialog = (title: string, value: EvaluateType ) => {
    evaluateDialogState.evaluateDialogVisible = true;
    evaluateDialogState.disabled = false
    evaluateDialogState.evaluateMethod = value.evaluateMethod as number
    setTimeout(() => {
        evaluateFormRef.value.clearValidate();
    });
    if( value.lecId || value.lsId || value.mesId || value.rsId){
        evaluateDialogState.title = '编辑评价';
        for(let i in evaluateDialogState.evaluateForm){
            if(isValidKey(i, evaluateDialogState.evaluateForm)){
                evaluateDialogState.evaluateForm[i] = value[i]
            }
        }
    }else if(title === '查看'){
        evaluateDialogState.disabled = true
        for(let i in evaluateDialogState.evaluateForm){
            if(isValidKey(i, evaluateDialogState.evaluateForm)){
                evaluateDialogState.evaluateForm[i] = value[i]
            }
        }
    }else{
        evaluateDialogState.title = '评价';
        evaluateDialogState.evaluateForm = {
            id: null,
            identificationId: null,
            riskValue: null,
            riskLevelValue: null,
            riskLevel: null,
            riskColor: null,
            manageLevel: null,
            lecL: null,
            lecE: null,
            lecC: null,
            lsL: null,
            lsS: null,
            mesM: null,
            mesE: null,
            mesS: null,
            rsR: null,
            rsS: null,
            lecId: null,
            lsId: null,
            mesId: null,
            rsId: null,
        };
    }
    evaluateDialogState.evaluateForm.id = value.id as number
    evaluateDialogState.evaluateForm.identificationId = (value.hazopId || value.jhaId || value.phaId || value.sclId || value.analogyId) as number
};

const onSubmitEvaluate = () => {
    evaluateFormRef.value.validate(async(valid: boolean) => {
        if(valid){
            evaluateDialogState.evaluateForm.riskValue = Number(numValue.value)
            if(evaluateDialogState.title === '评价'){
                let { lecId, lsId, mesId, rsId, ...data} = evaluateDialogState.evaluateForm
                let res = await evaluateApi().addEvaluate(data);
                if(res.data.code === 100){
                    emit('refresh')
                    evaluateDialogState.evaluateDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{
                let res = await evaluateApi().modEvaluate(evaluateDialogState.evaluateForm)
                if(res.data.code === 100){
                    emit('refresh')
                    evaluateDialogState.evaluateDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
    })
}

const emit = defineEmits(['refresh']);

defineExpose({
    showEvaluateDialog
});
</script>

<style scoped>

</style>

 src/views/analyse/evaluate/index.ts

对比新文件
@@ -0,0 +1,58 @@
declare interface EvaluateStateType {
    evaluateData: Array<EvaluateType>
    searchQuery: {
        pageIndex: number,
        pageSize: number,
        assessPlanName: string,
        experimentName: string,
        tag: number,
    }
    total: number
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    planList: Array<PlanType>
    personList: Array<SystemPersonType>
}
declare interface EvaluateType {
    id: null | number,
    riskValue: null | number,
    riskLevelValue: null | number,
    riskLevel: null | number,
    riskColor: null | number,
    manageLevel: null | number,
    identificationId: null | number,
    lecL: null | number,
    lecE: null | number,
    lecC: null | number,
    lsL: null | number,
    lsS: null | number,
    mesM: null | number,
    mesE: null | number,
    mesS: null | number,
    rsR: null | number,
    rsS: null | number,
    lecId: null | number,
    lsId: null | number,
    mesId: null | number,
    rsId: null | number,
    evaluateMethod?: null | number,
    evaluateStatus?: null | number,
}

declare interface EvaluateDialogType {
    title: string,
    time: string [],
    disabled: boolean,
    evaluateDialogVisible: boolean,
    evaluateMethod: number,
    evaluateForm: EvaluateType,
    evaluateFormRules: {

    },
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    riskLevelValueList: Array<Type>
    riskLevelList: Array<Type>
    riskColorList: Array<Type>
    manageLevelList: Array<Type>
}

 src/views/analyse/evaluate/index.vue

对比新文件
@@ -0,0 +1,424 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>评估计划名称：</span>
                    <el-input v-model="evaluateState.searchQuery.assessPlanName" clearable filterable class="input-box" placeholder="评估计划名称">
                    </el-input>
                </div>
                <div class="basic-line">
                    <span>实验名称：</span>
                    <el-input v-model="evaluateState.searchQuery.experimentName" clearable filterable class="input-box" placeholder="实验名称">
                    </el-input>
                </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getEvaluateData">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
<!--                        <el-col :span="12" class="mainCardBtn">-->
<!--                            <el-button type="primary" :icon="Plus" size="default" @click="openevaluateDialog('新增', {})">新增</el-button>-->
<!--                        </el-col>-->
                    </el-row>
                    <el-table ref="multipleTableRef" :data="evaluateState.evaluateData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column type="expand">
                            <template #default="scope">
                                <el-table :data="scope.row.factorQueryDTOList" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="80" />
                                    <el-table-column prop="technologyMeasure" label="技术措施" show-overflow-tooltip align="center"></el-table-column>
                                    <el-table-column prop="manageMeasure" label="管理措施" show-overflow-tooltip align="center"></el-table-column>
                                    <el-table-column prop="educationMeasure" label="教育措施" show-overflow-tooltip align="center"></el-table-column>
                                    <el-table-column prop="personalProtectionMeasure" label="防护措施" show-overflow-tooltip align="center"></el-table-column>
                                    <el-table-column prop="evaluateStatus" label="防护措施" show-overflow-tooltip align="center">
                                        <template #default="scope">
                                            <div>
                                                <div v-if="scope.row.evaluateStatus === 0">
                                                    <el-tag :type="'info'">
                                                        {{ '未评价' }}
                                                    </el-tag>
                                                </div>
                                                <div v-if="scope.row.evaluateStatus === 1">
                                                    <el-tag :type="'success'">
                                                        {{ '已评价' }}
                                                    </el-tag>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="250">
                                        <template #default="scope">
                                            <el-button size="small" text type="primary" :icon="Plus" @click="openEvaluateDialog('评价', scope.row)">评价</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>

                        <el-table-column prop="assessPlanName" label="评估计划名称"/>
                        <el-table-column prop="identificationMethod" label="辨识方法" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{`${evaluateState.identificationMethodList.find(item =>item.id === scope.row.identificationMethod)?.name}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="identificationUser" label="计划负责人" />
                        <el-table-column prop="evaluateUser" label="评价专家" />
                        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planExecStatus" label="状态" show-overflow-tooltip>
                            <template #default="scope">
                                <div>
                                    <div v-if="scope.row.planExecStatus === 3">
                                        <el-tag :type="'info'">
                                            {{ '未提交' }}
                                        </el-tag>
                                    </div>
                                    <div v-if="scope.row.planExecStatus === 4">
                                        <el-tag :type="'success'">
                                            {{ '已提交' }}
                                        </el-tag>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250">
                            <template #default="scope">
                                <el-button size="small" text type="primary" @click="accessEvaluate(scope.row)">提交</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="evaluateState.searchQuery.pageIndex" background v-model:page-size="evaluateState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="evaluateState.total" class="page-position"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <evaluate-dialog ref="evaluateDialogRef" @refresh="getEvaluateData"></evaluate-dialog>
    </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {evaluateApi} from "/@/api/analyse/evaluate";
import {identifyApi} from "/@/api/analyse/identify";
import {ElMessage, ElMessageBox} from "element-plus";
import { Edit, View, Plus, Delete } from '@element-plus/icons-vue';
import {planApi} from "/@/api/analyse/plan";
import {userApi} from "/@/api/systemManage/user";

const EvaluateDialog = defineAsyncComponent(() => import('./components/evaluateDialog.vue'));

const evaluateDialogRef = ref();

const evaluateState = reactive<EvaluateStateType>({
    evaluateData: [],
    searchQuery: {
        pageIndex: 1,
        pageSize: 10,
        assessPlanName: '',
        experimentName: '',
        tag: 2,
    },
    total: 0,
    planList: [
    ],
    personList: [],
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    evaluateMethodList: [
        {id:1, name: 'LEC'},
        {id:2, name: 'LS'},
        {id:3, name: 'MES'},
        {id:4, name: 'RS'},
    ]
    // deviceUnitList: [
    //     {id:1, name: '台'},
    //     {id:2, name: '个'},
    //     {id:3, name: '件'}
    // ]
});

const getEvaluateData = async () => {
    let res = await identifyApi().getIdentifyByList(evaluateState.searchQuery);
    if(res.data.code === 100){
        evaluateState.evaluateData = res.data.data;
        evaluateState.total = res.data.total;
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getAllPlanList = async () => {
    let res = await planApi().getAllPlan();
    if(res.data.code === 100){
        evaluateState.planList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getPersonList = async () => {
    let res = await userApi().getUserList({
        roleId: 1,
        usePage: false,
        pageIndex: 1,
        pageSize: 10
    });
    if(res.data.code === 100){
        evaluateState.personList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const openEvaluateDialog = (title: string, value: IdentifyType) => {
    evaluateDialogRef.value.showEvaluateDialog(title, value);
};

const onDelEvaluate = (val: IdentifyType) => {
    ElMessageBox.confirm(`此操作将提交该计划：“${val.assessPlanName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await evaluateApi().submitEvaluate({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '删除成功'
                });
                await getEvaluateData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const accessEvaluate = (val: IdentifyType) => {
    ElMessageBox.confirm(`此操作将派发该计划：“${val.assessPlanName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await evaluateApi().submitEvaluate({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '提交成功'
                });
                await getEvaluateData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const onHandleSizeChange = (val: number) => {
    evaluateState.searchQuery.pageSize = val;
    getEvaluateData();
};

const onHandleCurrentChange = (val: number) => {
    evaluateState.searchQuery.pageIndex = val;
    getEvaluateData();
};

const reset = () => {
    evaluateState.searchQuery = {
        pageIndex: 1,
        pageSize: 10,
        assessPlanName: '',
        experimentName: '',
        tag: 2,
    }
};

onMounted(() => {
    getEvaluateData();
    getAllPlanList();
    getPersonList();
});

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.stepItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid #ccc;
    &:first-of-type {
        margin-top: 30px;
    }
    &:last-of-type {
        margin-bottom: 0;
        border-left: none;
    }
    .stepNum {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-sizing: border-box;
        color: #333;
        border: 1px solid #999;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        margin-left: -16px;
        margin-top: -30px;
    }
    .stepCard {
        width: 100%;
        margin-top: -30px;

        .box-card {
            width: 100%;
            &:deep(.el-card__header) {
                padding: 10px 15px;
            }
            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > div:first-of-type {
                    margin-right: 80px;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
    &:hover .card-header {
        color: #0098f5;
    }
    &:hover .stepNum {
        border: 2px solid #0098f5;
        color: #0098f5;
    }
}

:deep(.el-date-editor) {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
:deep(.el-range-editor.is-disabled input){
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
</style>

 src/views/analyse/identify/components/identifyDialog.vue

对比新文件
@@ -0,0 +1,366 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="identifyDialogState.title" v-model="identifyDialogState.identifyDialogVisible" width="600px">
            <el-form ref="identifyFormRef" :rules="identifyDialogState.identifyFormRules" :model="identifyDialogState.identifyForm" size="default" label-width="140px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="技术措施" prop="technologyMeasure">
                            <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.technologyMeasure" placeholder="技术措施" clearable></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="manageMeasure">
                            <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.manageMeasure" placeholder="管理措施" clearable></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="educationMeasure">
                            <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.educationMeasure" placeholder="教育措施" clearable></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="personalProtectionMeasure">
                            <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.personalProtectionMeasure" placeholder="防护措施" clearable></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="emergencyMeasure">
                            <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.emergencyMeasure" placeholder="应急措施" clearable></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="identificationMethod">
                            <el-select class="input-length" :disabled="true" v-model="identifyDialogState.identifyForm.identificationMethod" style="width:100%" placeholder="辨识方法" clearable>
                                <el-option v-for="item in identifyDialogState.identificationMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <div style="width: 100%" v-if="identifyDialogState.identifyForm.identificationMethod === 5">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="检查项目" prop="analogyCheckItem">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.analogyCheckItem" placeholder="检查项目" clearable></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="analogyRiskFactor">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.analogyRiskFactor" placeholder="存在风险因素" clearable></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="analogyResult">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.analogyResult" placeholder="可能产生的后果" clearable></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="analogyReference">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.analogyReference" placeholder="类比参照" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="identifyDialogState.identifyForm.identificationMethod === 4">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="节点" prop="hazopNode">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopNode" placeholder="节点" clearable></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="hazopParam">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopParam" placeholder="参数" clearable></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="hazopParamDesc">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopParamDesc" placeholder="参数描述" clearable></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="hazopGuide">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopGuide" placeholder="引导词" clearable></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="hazopDeviation">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopDeviation" placeholder="偏差" clearable></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="hazopPossibleCauses">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopPossibleCauses" placeholder="可能原因" clearable></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="hazopResult">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.hazopResult" placeholder="主要后果" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="identifyDialogState.identifyForm.identificationMethod === 2">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="作业步骤" prop="jhaCheckItem">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.jhaCheckItem" placeholder="作业步骤" clearable></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="jhaRiskFactor">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.jhaRiskFactor" placeholder="危险源或潜在事件" clearable></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="jhaResult">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.jhaResult" placeholder="可能发生的事故" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="identifyDialogState.identifyForm.identificationMethod === 1">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="检查项目" prop="phaCheckItem">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.phaCheckItem" placeholder="检查项目" clearable></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="phaRiskFactor">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.phaRiskFactor" placeholder="存在风险因素" clearable></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="phaResult">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.phaResult" placeholder="可能产生的后果" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>

                    <div style="width: 100%" v-if="identifyDialogState.identifyForm.identificationMethod === 3">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="检查项目" prop="sclCheckItem">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.sclCheckItem" placeholder="检查项目" clearable></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="sclCheckStandard">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.sclCheckStandard" placeholder="检查标准" clearable></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="sclCheckUnstandard">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.sclCheckUnstandard" placeholder="不符合标准情况" clearable></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="sclCheckResult">
                                <el-input class="input-length" :disabled="identifyDialogState.disabled" v-model="identifyDialogState.identifyForm.sclCheckResult" placeholder="主要后果" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="identifyDialogState.identifyDialogVisible = !identifyDialogState.identifyDialogVisible" size="default">取 消</el-button>
                    <el-button v-if="!identifyDialogState.disabled" type="primary" @click="onSubmitIdentify" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {ElMessage} from "element-plus";
import {identifyApi} from "/@/api/analyse/identify";
import {isValidKey} from "/@/utils/methods";

const identifyFormRef = ref()

const identifyDialogState = reactive<IdentifyDialogType>({
    title: '',
    time:[],
    disabled: false,
    identifyDialogVisible: false,
    identifyForm: {
        id: null,
        technologyMeasure: '',
        manageMeasure: '',
        educationMeasure: '',
        personalProtectionMeasure: '',
        emergencyMeasure: '',
        identificationMethod: null,
        analogyCheckItem: '',
        analogyRiskFactor: '',
        analogyResult: '',
        analogyReference: '',
        hazopNode: '',
        hazopParam: '',
        hazopParamDesc: '',
        hazopGuide: '',
        hazopDeviation: '',
        hazopPossibleCauses: '',
        hazopResult: '',
        jhaCheckItem: '',
        jhaRiskFactor: '',
        jhaResult: '',
        phaCheckItem: '',
        phaRiskFactor: '',
        phaResult: '',
        sclCheckItem: '',
        sclCheckStandard: '',
        sclCheckUnstandard: '',
        sclCheckResult: '',
        hazopId: null,
        jhaId: null,
        phaId: null,
        sclId: null,
        analogyId: null,
    },
    identifyFormRules: {
        deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        riskUnitId: [{ required: true, message: '请选择风险分析单元', trigger: 'change' }],
        identifyUserId: [{ required: true, message: '请选择计划制定人', trigger: 'change' }],
        identificationMethod: [{ required: true, message: '请选择辨识方法', trigger: 'change' }],
        identificationUserId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        evaluateMethod: [{ required: true, message: '请选择推荐评价方法', trigger: 'change' }],
        evaluateUserId: [{ required: true, message: '请选择评价专家', trigger: 'change' }],
    },
    planList: [],
    personList: [],
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    evaluateMethodList: [
        {id:1, name: 'LEC'},
        {id:2, name: 'LS'},
        {id:3, name: 'MES'},
        {id:4, name: 'RS'},
    ]
})

const showIdentifyDialog = (title: string, value: IdentifyType, identifyQueryForm: IdentifyType) => {
    identifyDialogState.identifyDialogVisible = true;
    identifyDialogState.disabled = false
    setTimeout(() => {
        identifyFormRef.value.clearValidate();
    });
    if(title === '新增'){
        identifyDialogState.title = '新增';
        identifyDialogState.identifyForm = {
            id: null,
            technologyMeasure: '',
            manageMeasure: '',
            educationMeasure: '',
            personalProtectionMeasure: '',
            emergencyMeasure: '',
            identificationMethod: null,
            analogyCheckItem: '',
            analogyRiskFactor: '',
            analogyResult: '',
            analogyReference: '',
            hazopNode: '',
            hazopParam: '',
            hazopParamDesc: '',
            hazopGuide: '',
            hazopDeviation: '',
            hazopPossibleCauses: '',
            hazopResult: '',
            jhaCheckItem: '',
            jhaRiskFactor: '',
            jhaResult: '',
            phaCheckItem: '',
            phaRiskFactor: '',
            phaResult: '',
            sclCheckItem: '',
            sclCheckStandard: '',
            sclCheckUnstandard: '',
            sclCheckResult: '',
            hazopId: null,
            jhaId: null,
            phaId: null,
            sclId: null,
            analogyId: null,
        };
    }else if(title === '查看'){
        identifyDialogState.title = '查看';
        identifyDialogState.disabled = true
        for(let i in identifyDialogState.identifyForm){
            if(isValidKey(i, identifyDialogState.identifyForm)){
                identifyDialogState.identifyForm[i] = identifyQueryForm[i];
            }
        }
    }else{
        identifyDialogState.title = '编辑';
        identifyDialogState.identifyForm.hazopId = identifyQueryForm.hazopId;
        identifyDialogState.identifyForm.jhaId = identifyQueryForm.jhaId;
        identifyDialogState.identifyForm.phaId = identifyQueryForm.phaId;
        identifyDialogState.identifyForm.sclId = identifyQueryForm.sclId;
        identifyDialogState.identifyForm.analogyId = identifyQueryForm.analogyId;
        for(let i in identifyDialogState.identifyForm){
            if(isValidKey(i, identifyDialogState.identifyForm)){
                identifyDialogState.identifyForm[i] = identifyQueryForm[i];
            }
        }
    }
    identifyDialogState.identifyForm.id = value.id;
    identifyDialogState.identifyForm.identificationMethod = value.identificationMethod;
};

const onSubmitIdentify = () => {
    identifyFormRef.value.validate(async(valid: boolean) => {
        if(valid){
            if(identifyDialogState.title === '新增'){
                let { hazopId, jhaId, phaId, sclId, analogyId, ...data } = identifyDialogState.identifyForm
                let res = await identifyApi().addIdentify(data);
                if(res.data.code === 100){
                    emit('refresh',1,res.data.data)
                    identifyDialogState.identifyDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{
                let res = await identifyApi().modIdentify(identifyDialogState.identifyForm)
                if(res.data.code === 100){
                    emit('refresh',2,identifyDialogState.identifyForm)
                    identifyDialogState.identifyDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
    })
}

const emit = defineEmits(['refresh'])

defineExpose({
    showIdentifyDialog
})
</script>

<style scoped>

</style>

 src/views/analyse/identify/components/identifyQuery.vue

对比新文件
@@ -0,0 +1,157 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="identifyQueryState.title" v-model="identifyQueryState.identifyQueryVisible" :close-on-click-modal="false" width="800px">
            <el-form ref="identifyFormRef" :rules="identifyQueryState.identifyFormRules" :model="identifyQueryState.identifyQueryForm" size="default" label-width="100px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评估计划" prop="id">
                            <el-select class="input-length" :disabled="true" v-model="identifyQueryState.identifyQueryForm.id" style="width:100%" placeholder="评估计划" clearable>
                                <el-option v-for="item in identifyQueryState.planList" :key="item.id" :label="item.assessPlanName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="辨识方法" prop="identificationMethod">
                            <el-select class="input-length" :disabled="identifyQueryState.disabled" v-model="identifyQueryState.identifyQueryForm.identificationMethod" style="width:100%" placeholder="辨识方法" clearable>
                                <el-option v-for="item in identifyQueryState.identificationMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="checkUnit-point">
                <el-tabs class="active" v-model="identifyQueryState.activeName">
                    <el-tab-pane label="辨识信息" name="identify">
                        <div style="padding-bottom: 10px" v-if="identifyQueryState.identifyForm.planExecStatus === 2">
                            <el-button size="default"  type="primary"  @click="openIdentifyDialog('新增', '')">
                                <el-icon>
                                    <ele-FolderAdd />
                                </el-icon>
                                新增
                            </el-button>
                        </div>

                        <el-table :data="identifyQueryState.list" border fit highlight-current-row style="width: 100%">
                            <el-table-column type="index" label="序号" width="80" />
                            <el-table-column prop="technologyMeasure" label="技术措施" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="manageMeasure" label="管理措施" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="educationMeasure" label="教育措施" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="personalProtectionMeasure" label="防护措施" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column label="操作" width="150" align="center">
                                <template #default="scope">
                                    <el-button size="default" text  type="primary"  @click="openIdentifyDialog('查看', scope.row)">查看</el-button>
                                    <el-button size="default" text  type="primary" v-if="identifyQueryState.identifyForm.planExecStatus === 2"  @click="openIdentifyDialog('编辑', scope.row)">编辑</el-button>
                                    <el-button size="default" text type="danger" v-if="identifyQueryState.identifyForm.planExecStatus === 2" @click="onDelIdentifyQuery(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <span class="Query-footer">
                    <el-button @click="identifyQueryState.identifyQueryVisible = !identifyQueryState.identifyQueryVisible" size="default">取 消</el-button>
                    <el-button v-if="identifyQueryState.identifyForm.planExecStatus === 2" type="primary" @click="identifyQueryState.identifyQueryVisible = !identifyQueryState.identifyQueryVisible" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <identify-dialog ref="identifyDialogRef" @refresh="refreshList"></identify-dialog>
    </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {identifyApi} from "/@/api/analyse/identify";
import {isValidKey} from "/@/utils/methods";

const identifyDialogRef = ref()
const IdentifyDialog = defineAsyncComponent(() => import('./identifyDialog.vue'))

const identifyQueryState = reactive<IdentifyQueryType>({
    title: '',
    activeName: 'identify',
    list: [],
    identifyQueryVisible: false,
    identifyQueryForm: {
        id: null,
        identificationMethod: null,
    },
    identifyForm: {},
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    planList: [],
})

const showIdentifyQuery = (title: string, value: IdentifyType, planList: PlanType [], personList: SystemPersonType []) => {
    identifyQueryState.identifyQueryVisible = true;
    identifyQueryState.identifyForm = value;
    identifyQueryState.planList = planList;
    identifyQueryState.list = value.factorQueryDTOList;
    for(let i in identifyQueryState.identifyQueryForm){
        if(isValidKey(i, identifyQueryState.identifyQueryForm)){
            identifyQueryState.identifyQueryForm[i] = value[i]
        }
    }
    if(title === '编辑'){
        identifyQueryState.title = '编辑';
    }else {
        identifyQueryState.title = '查看';
    }
};

const openIdentifyDialog = (title: string, value: IdentifyType) => {
    identifyDialogRef.value.showIdentifyDialog(title, identifyQueryState.identifyForm, value);
};

const refreshList = (type: number, data: IdentifyType) => {
    if(type === 1){
        identifyQueryState.list?.push(data)
    }else{
        (<Array<IdentifyType>>identifyQueryState.list)[identifyQueryState.list?.findIndex(item => item.id === data.id) as number] = data
    }
};

const onDelIdentifyQuery = (index: number, val: IdentifyType) => {
    ElMessageBox.confirm(`此操作将永久删除该辨识，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let data = { id: val.id, analogyId: val.analogyId, hazopId: val.hazopId, jhaId: val.jhaId, phaId: val.phaId, sclId: val.sclId, }
            let res = await identifyApi().deleteIdentifyById(data);
            if (res.data.code === 100) {
                (<Array<IdentifyType>>identifyQueryState.list).splice(index, 1)
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '删除成功'
                });
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
            console.log(error);
        });
};

const emit = defineEmits(['refresh'])

defineExpose({
    showIdentifyQuery
})
</script>

<style scoped>

</style>

 src/views/analyse/identify/index.ts

对比新文件
@@ -0,0 +1,128 @@
declare interface IdentifyStateType {
    identifyData: Array<IdentifyType>
    searchQuery: {
        pageIndex: number,
        pageSize: number,
        assessPlanName: string,
        experimentName: string,
        tag: number,
    }
    total: number
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    planList: Array<PlanType>
    personList: Array<SystemPersonType>
}

declare interface IdentifyQueryType {
    title: string,
    activeName: string,
    list?: IdentifyType [],
    identifyQueryVisible: boolean,
    identifyQueryForm: {
        id: null | number,
        identificationMethod: null | number,
    },
    identifyForm: {},
    identificationMethodList: Array<Type>,
    planList: Array<PlanType>
}

declare  interface SystemPersonType {
    id: number,
    realName: string,
}

declare interface IdentifyType {
    id: number | null,
    technologyMeasure: string,
    assessPlanName: string,
    manageMeasure: string,
    educationMeasure: string,
    personalProtectionMeasure: string,
    emergencyMeasure: string,
    identificationMethod: number | null,
    hazopId?: number | null,
    jhaId?: number | null,
    phaId?: number | null,
    sclId?: number | null,
    analogyId?: number | null,
    analogyCheckItem: string,
    analogyRiskFactor: string,
    analogyResult: string,
    analogyReference: string,
    hazopNode: string,
    hazopParam: string,
    hazopParamDesc: string,
    hazopGuide: string,
    hazopDeviation: string,
    hazopPossibleCauses: string,
    hazopResult: string,
    jhaCheckItem: string,
    jhaRiskFactor: string,
    jhaResult: string,
    phaCheckItem: string,
    phaRiskFactor: string,
    phaResult: string,
    sclCheckItem: string,
    sclCheckStandard: string,
    sclCheckUnstandard: string,
    sclCheckResult: string,
    planExecStatus: number,
    evaluateMethod: number,
    factorQueryDTOList?: IdentifyType [],
}

declare interface Type {
    id: number,
    name: string,
}

declare interface IdentifyDialogType {
    title: string,
    time: string [],
    disabled: boolean,
    identifyDialogVisible: boolean,
    identifyForm: {
        id: number | null,
        technologyMeasure: string,
        manageMeasure: string,
        educationMeasure: string,
        personalProtectionMeasure: string,
        emergencyMeasure: string,
        identificationMethod: number | null,
        hazopId?: number | null,
        jhaId?: number | null,
        phaId?: number | null,
        sclId?: number | null,
        analogyId?: number | null,
        analogyCheckItem: string,
        analogyRiskFactor: string,
        analogyResult: string,
        analogyReference: string,
        hazopNode: string,
        hazopParam: string,
        hazopParamDesc: string,
        hazopGuide: string,
        hazopDeviation: string,
        hazopPossibleCauses: string,
        hazopResult: string,
        jhaCheckItem: string,
        jhaRiskFactor: string,
        jhaResult: string,
        phaCheckItem: string,
        phaRiskFactor: string,
        phaResult: string,
        sclCheckItem: string,
        sclCheckStandard: string,
        sclCheckUnstandard: string,
        sclCheckResult: string,
    },
    identifyFormRules: {

    },
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    planList: Array<PlanType>
    personList: Array<SystemPersonType>
}

 src/views/analyse/identify/index.vue

对比新文件
@@ -0,0 +1,395 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>评估计划名称：</span>
                    <el-input v-model="identifyState.searchQuery.assessPlanName" clearable filterable class="input-box" placeholder="评估计划名称">
                    </el-input>
                </div>
                <div class="basic-line">
                    <span>实验名称：</span>
                    <el-input v-model="identifyState.searchQuery.experimentName" clearable filterable class="input-box" placeholder="实验名称">
                    </el-input>
                </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getIdentifyData">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
<!--                            <el-button type="primary" :icon="Plus" size="default" @click="openIdentifyQuery('新增', {})">新增</el-button>-->
                            <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
                        </el-col>
                        <!--                        <el-button type="primary" :icon="Refresh" size="default" />-->
                    </el-row>
                    <el-table ref="multipleTableRef" :data="identifyState.identifyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column prop="assessPlanName" label="评估计划名称"/>
                        <el-table-column prop="identificationMethod" label="辨识方法" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{`${identifyState.identificationMethodList.find(item =>item.id === scope.row.identificationMethod)?.name}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="identificationUser" label="计划负责人" />
                        <el-table-column prop="evaluateUser" label="评价专家" />
                        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planExecStatus" label="状态" show-overflow-tooltip>
                            <template #default="scope">
                                <div>
                                    <div v-if="scope.row.planExecStatus === 2">
                                        <el-tag :type="'info'">
                                            {{ '未辨识' }}
                                        </el-tag>
                                    </div>
                                    <div v-if="scope.row.planExecStatus === 3">
                                        <el-tag :type="'success'">
                                            {{ '已辨识' }}
                                        </el-tag>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250">
                            <template #default="scope">
                                <el-button size="small" text type="primary" v-if="scope.row.planExecStatus === 2" @click="accessIdentify(scope.row)">提交</el-button>
                                <el-button size="small" text type="primary" :icon="View" @click="openIdentifyQuery('查看', scope.row)">查看</el-button>
                                <el-button size="small" text type="primary" v-if="scope.row.planExecStatus === 2" :icon="Edit" @click="openIdentifyQuery('编辑', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelIdentify(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="identifyState.searchQuery.pageIndex" background v-model:page-size="identifyState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="identifyState.total" class="page-position"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <identify-query-dialog ref="identifyQueryDialogRef" @refresh="getIdentifyData"></identify-query-dialog>
    </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {identifyApi} from "/@/api/analyse/identify";
import {ElMessage, ElMessageBox} from "element-plus";
import { Edit, View, Plus, Delete } from '@element-plus/icons-vue';
import {planApi} from "/@/api/analyse/plan";
import {userApi} from "/@/api/systemManage/user";

const IdentifyQueryDialog = defineAsyncComponent(() => import('./components/identifyQuery.vue'));

const identifyQueryDialogRef = ref();

const identifyState = reactive<IdentifyStateType>({
    identifyData: [],
    searchQuery: {
        pageIndex: 1,
        pageSize: 10,
        assessPlanName: '',
        experimentName: '',
        tag: 1,
    },
    total: 0,
    planList: [
    ],
    personList: [],
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    evaluateMethodList: [
        {id:1, name: 'LEC'},
        {id:2, name: 'LS'},
        {id:3, name: 'MES'},
        {id:4, name: 'RS'},
    ]
    // deviceUnitList: [
    //     {id:1, name: '台'},
    //     {id:2, name: '个'},
    //     {id:3, name: '件'}
    // ]
});

const getIdentifyData = async () => {
    let res = await identifyApi().getIdentifyByList(identifyState.searchQuery);
    if(res.data.code === 100){
        identifyState.identifyData = res.data.data;
        identifyState.total = res.data.total;
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getAllPlanList = async () => {
    let res = await planApi().getAllPlan();
    if(res.data.code === 100){
        identifyState.planList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getPersonList = async () => {
    let res = await userApi().getUserList({
        roleId: 1,
        usePage: false,
        pageIndex: 1,
        pageSize: 10
    });
    if(res.data.code === 100){
        identifyState.personList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const openIdentifyQuery = (title: string, value: IdentifyType) => {
    identifyQueryDialogRef.value.showIdentifyQuery(title, value, identifyState.planList, identifyState.personList);
};

const onDelIdentify = (val: IdentifyType) => {
    ElMessageBox.confirm(`此操作将永久删除该辨识，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await identifyApi().deleteIdentifyById({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '删除成功'
                });
                await getIdentifyData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const accessIdentify = (val: IdentifyType) => {
    ElMessageBox.confirm(`此操作将派发该计划：“${val.assessPlanName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await identifyApi().submitIdentify({ id: val.id});
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '提交成功'
                });
                await getIdentifyData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const onHandleSizeChange = (val: number) => {
    identifyState.searchQuery.pageSize = val;
    getIdentifyData();
};

const onHandleCurrentChange = (val: number) => {
    identifyState.searchQuery.pageIndex = val;
    getIdentifyData();
};

const reset = () => {
    identifyState.searchQuery = {
        pageIndex: 1,
        pageSize: 10,
        assessPlanName: '',
        experimentName: '',
        tag: 1,
    }
};

onMounted(() => {
    getIdentifyData();
    getAllPlanList();
    getPersonList();
});

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.stepItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid #ccc;
    &:first-of-type {
        margin-top: 30px;
    }
    &:last-of-type {
        margin-bottom: 0;
        border-left: none;
    }
    .stepNum {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-sizing: border-box;
        color: #333;
        border: 1px solid #999;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        margin-left: -16px;
        margin-top: -30px;
    }
    .stepCard {
        width: 100%;
        margin-top: -30px;

        .box-card {
            width: 100%;
            &:deep(.el-card__header) {
                padding: 10px 15px;
            }
            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > div:first-of-type {
                    margin-right: 80px;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
    &:hover .card-header {
        color: #0098f5;
    }
    &:hover .stepNum {
        border: 2px solid #0098f5;
        color: #0098f5;
    }
}

:deep(.el-date-editor) {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
:deep(.el-range-editor.is-disabled input){
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
</style>

 src/views/analyse/plan/components/planDialog.vue

对比新文件
@@ -0,0 +1,230 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="planDialogState.title" v-model="planDialogState.planDialogVisible" width="600px">
            <el-form ref="planFormRef" :rules="planDialogState.planFormRules" :model="planDialogState.planForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="风险分析单元" prop="riskUnitId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.riskUnitId" style="width:100%" placeholder="风险分析单元" clearable>
                                <el-option v-for="item in planDialogState.riskUnitList" :key="item.id" :label="item.riskName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评估计划名称" prop="assessPlanName">
                            <el-input :disabled="planDialogState.disabled" v-model="planDialogState.planForm.assessPlanName" placeholder="评估计划名称" clearable></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="planUserId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.planUserId" style="width:100%"  placeholder="计划制定人" clearable>
                                <el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评估时间" prop="assessPlanName">
                            <el-date-picker
                                :disabled="planDialogState.disabled"
                                type="datetimerange"
                                v-model="planDialogState.time"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                @change="formatTime">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="辨识方法" prop="identificationMethod">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.identificationMethod" style="width:100%" placeholder="辨识方法" clearable>
                                <el-option v-for="item in planDialogState.identificationMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="负责人" prop="identificationUserId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.identificationUserId" style="width:100%"  placeholder="负责人" clearable>
                                <el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="推荐评价方法" prop="evaluateMethod">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.evaluateMethod" style="width:100%"  placeholder="推荐评价方法" clearable>
                                <el-option v-for="item in planDialogState.evaluateMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="评价专家" prop="evaluateUserId">
                            <el-select :disabled="planDialogState.disabled" v-model="planDialogState.planForm.evaluateUserId" style="width:100%"  placeholder="评价专家" clearable>
                                <el-option v-for="item in planDialogState.personList" :key="item.id" :label="item.realName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="planDialogState.planDialogVisible = !planDialogState.planDialogVisible" size="default">取 消</el-button>
                    <el-button v-if="!planDialogState.disabled" type="primary" @click="onSubmitPlan" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {ElMessage} from "element-plus";
import {planApi} from "/@/api/analyse/plan";
import {isValidKey} from "/@/utils/methods";

const planFormRef = ref()

const planDialogState = reactive<PlanDialogType>({
    title: '',
    time:[],
    disabled: false,
    planDialogVisible: false,
    planForm: {
        riskUnitId: null,
        planUserId: null,
        assessPlanName: '',
        assessStartTime: '',
        assessEndTime: '',
        identificationMethod: null,
        identificationUserId: null,
        evaluateMethod: null,
        evaluateUserId: null,
    },
    planFormRules: {
        deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        riskUnitId: [{ required: true, message: '请选择风险分析单元', trigger: 'change' }],
        planUserId: [{ required: true, message: '请选择计划制定人', trigger: 'change' }],
        identificationMethod: [{ required: true, message: '请选择辨识方法', trigger: 'change' }],
        identificationUserId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        evaluateMethod: [{ required: true, message: '请选择推荐评价方法', trigger: 'change' }],
        evaluateUserId: [{ required: true, message: '请选择评价专家', trigger: 'change' }],
    },
    riskUnitList: [],
    personList: [],
    identificationMethodList: [
        {id:1, name: 'PHA'},
        {id:2, name: 'JHA'},
        {id:3, name: 'SCL'},
        {id:4, name: 'HAZOP'},
        {id:5, name: '类比法'},
    ],
    evaluateMethodList: [
        {id:1, name: 'LEC'},
        {id:2, name: 'LS'},
        {id:3, name: 'MES'},
        {id:4, name: 'RS'},
    ]
})

const showPlanDialog = (title: string, value: PlanType, riskUnitList: RiskUnitType [], personList: SystemPersonType []) => {
    planDialogState.planDialogVisible = true;
    planDialogState.riskUnitList = riskUnitList;
    planDialogState.personList = personList;
    planDialogState.disabled = false
    setTimeout(() => {
        planFormRef.value.clearValidate();
    });
    if(title === '新增'){
        planDialogState.title = '新增';
        planDialogState.planForm = {
            riskUnitId: null,
            planUserId: null,
            assessPlanName: '',
            assessStartTime: '',
            assessEndTime: '',
            identificationMethod: null,
            identificationUserId: null,
            evaluateMethod: null,
            evaluateUserId: null,
        };
    }else if(title === '查看'){
        planDialogState.title = '查看';
        planDialogState.disabled = true
        planDialogState.time = [value.assessStartTime, value.assessEndTime]
        for(let i in planDialogState.planForm){
            if(isValidKey(i, planDialogState.planForm)){
                planDialogState.planForm[i] = value[i]
            }
        }
    }else{
        planDialogState.title = '编辑';
        planDialogState.planForm.id = value.id
        planDialogState.time = [value.assessStartTime, value.assessEndTime]
        for(let i in planDialogState.planForm){
            if(isValidKey(i, planDialogState.planForm)){
                planDialogState.planForm[i] = value[i]
            }
        }
    }
};

const formatTime = () => {
    planDialogState.planForm.assessStartTime = planDialogState.time === null ? '' : planDialogState.time[0]
    planDialogState.planForm.assessEndTime = planDialogState.time === null ? '' : planDialogState.time[1]
};

const onSubmitPlan = () => {
    planFormRef.value.validate(async(valid: boolean) => {
        if(valid){
            if(planDialogState.title === '新增'){
                let res = await planApi().addPlan(planDialogState.planForm);
                if(res.data.code === 100){
                    emit('refresh')
                    planDialogState.planDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{
                let res = await planApi().modPlan(planDialogState.planForm)
                if(res.data.code === 100){
                    emit('refresh')
                    planDialogState.planDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
    })
}

const emit = defineEmits(['refresh'])

defineExpose({
    showPlanDialog
})
</script>

<style scoped>

</style>

 src/views/analyse/plan/index.ts

对比新文件
@@ -0,0 +1,63 @@
declare interface PlanStateType {
    planData: Array<PlanType>
    searchQuery: {
        pageIndex: number,
        pageSize: number,
        assessPlanName: string,
        riskUnitName: string,
    }
    total: number
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    riskUnitList: Array<RiskUnitType>
    personList: Array<SystemPersonType>
}

declare  interface SystemPersonType {
    id: number,
    realName: string,
}

declare interface PlanType {
    id: number | null,
    riskUnitId: number | null,
    planUserId: number | null,
    assessPlanName: string,
    assessStartTime: string,
    assessEndTime: string,
    identificationMethod: number | null,
    identificationUserId: number | null,
    evaluateMethod: number | null,
    evaluateUserId: number | null,
}

declare interface Type {
    id: number,
    name: string,
}

declare interface PlanDialogType {
    title: string,
    time: string [],
    disabled: boolean,
    planDialogVisible: boolean,
    planForm: {
        id?: number | null,
        riskUnitId: number | null,
        planUserId: number | null,
        assessPlanName: string,
        assessStartTime: string,
        assessEndTime: string,
        identificationMethod: number | null,
        identificationUserId: number | null,
        evaluateMethod: number | null,
        evaluateUserId: number | null,
    },
    planFormRules: {

    },
    identificationMethodList: Array<Type>,
    evaluateMethodList: Array<Type>
    riskUnitList: Array<RiskUnitType>
    personList: Array<SystemPersonType>
}

 src/views/analyse/plan/index.vue

对比新文件
@@ -0,0 +1,402 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>评估计划名称：</span>
                    <el-input v-model="planState.searchQuery.assessPlanName" clearable filterable class="input-box" placeholder="评估计划名称">
                    </el-input>
                </div>
                <div class="basic-line">
                    <span>风险单元名称：</span>
                    <el-input v-model="planState.searchQuery.riskUnitName" clearable filterable class="input-box" placeholder="风险单元名称">
                    </el-input>
                </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getPlanData">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="openPlanDialog('新增', {})">新增</el-button>
                            <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
                        </el-col>
<!--                        <el-button type="primary" :icon="Refresh" size="default" />-->
                    </el-row>
                    <el-table ref="multipleTableRef" :data="planState.planData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column prop="assessPlanName" label="评估计划名称"/>
                        <el-table-column prop="riskUnitName" label="风险单元名称" />
                        <el-table-column prop="planUserName" label="计划制定人" />
                        <el-table-column prop="identificationMethod" label="辨识方法" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{`${planState.identificationMethodList.find(item =>item.id === scope.row.identificationMethod)?.name}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="identificationUser" label="计划负责人" />
                        <el-table-column prop="evaluateMethod" label="推荐评价方法" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{`${planState.evaluateMethodList.find(item =>item.id === scope.row.evaluateMethod)?.name}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="evaluateUser" label="评价专家" />
                        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="planSellStatus" label="是否派发" show-overflow-tooltip>
                            <template #default="scope">
                                <div>
                                    <div v-if="scope.row.planSellStatus === 1">
                                        <el-tag :type="'info'">
                                            {{ '未派发' }}
                                        </el-tag>
                                    </div>
                                    <div v-if="scope.row.planSellStatus === 2">
                                        <el-tag :type="'success'">
                                            {{ '已派发' }}
                                        </el-tag>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250">
                            <template #default="scope">
                                <el-button size="small" text type="primary" @click="accessPlan(scope.row)">派发</el-button>
                                <el-button size="small" text type="primary" :icon="View" @click="openPlanDialog('查看', scope.row)">查看</el-button>
                                <el-button v-if="scope.row.planSellStatus === 1" size="small" text type="primary" :icon="Edit" @click="openPlanDialog('修改', scope.row)">编辑</el-button>
                                <el-button v-if="scope.row.planSellStatus === 1" size="small" text type="danger" :icon="Delete" @click="onDelPlan(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="planState.searchQuery.pageIndex" background v-model:page-size="planState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="planState.total" class="page-position"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <plan-dialog ref="planDialogRef" @refresh="getPlanData"></plan-dialog>
    </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {planApi} from "/@/api/analyse/plan";
import {ElMessage, ElMessageBox} from "element-plus";
import { Edit, View, Plus, Delete } from '@element-plus/icons-vue';
import {riskUnitApi} from "/@/api/analyse/riskUnit";
import {personApi} from "/@/api/basic/person";
import {useUserInfo} from "/@/stores/userInfo";
import {userApi} from "/@/api/systemManage/user";

const PlanDialog = defineAsyncComponent(() => import('./components/planDialog.vue'));

const planDialogRef = ref();

const planState = reactive<PlanStateType>({
    planData: [],
    searchQuery: {
        pageIndex: 1,
        pageSize: 10,
        assessPlanName: '',
        riskUnitName: '',
    },
    total: 0,
    riskUnitList: [
    ],
    personList: [],
    identificationMethodList: [
    {id:1, name: 'PHA'},
    {id:2, name: 'JHA'},
    {id:3, name: 'SCL'},
    {id:4, name: 'HAZOP'},
    {id:5, name: '类比法'},
],
    evaluateMethodList: [
    {id:1, name: 'LEC'},
    {id:2, name: 'LS'},
    {id:3, name: 'MES'},
    {id:4, name: 'RS'},
]
    // deviceUnitList: [
    //     {id:1, name: '台'},
    //     {id:2, name: '个'},
    //     {id:3, name: '件'}
    // ]
})

const getPlanData = async () => {
    let res = await planApi().getPlanByList(planState.searchQuery);
    if(res.data.code === 100){
        planState.planData = res.data.data;
        planState.total = res.data.total;
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getAllRiskUnitList = async () => {
    let res = await riskUnitApi().getAllRiskUnit();
    if(res.data.code === 100){
        planState.riskUnitList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getPersonList = async () => {
    let res = await userApi().getUserList({
        roleId: 1,
        usePage: false,
        pageIndex: 1,
        pageSize: 10
    });
    if(res.data.code === 100){
        planState.personList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const openPlanDialog = (title: string, value: PlanType) => {
    planDialogRef.value.showPlanDialog(title, value, planState.riskUnitList, planState.personList);
};

const onDelPlan = (val: PlanType) => {
    ElMessageBox.confirm(`此操作将永久删除该计划：“${val.assessPlanName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await planApi().deletePlanById({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '删除成功'
                });
                await getPlanData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const accessPlan = (val: PlanType) => {
    ElMessageBox.confirm(`此操作将派发该计划：“${val.assessPlanName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await planApi().sellAssessPlan({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '派发成功'
                });
                await getPlanData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
};

const onHandleSizeChange = (val: number) => {
    planState.searchQuery.pageSize = val;
    getPlanData();
};

const onHandleCurrentChange = (val: number) => {
    planState.searchQuery.pageIndex = val;
    getPlanData();
};

const reset = () => {
    planState.searchQuery = {
        pageIndex: 1,
        pageSize: 10,
        riskUnitName: '',
        assessPlanName: '',
    }
};

onMounted(() => {
    getPlanData();
    getAllRiskUnitList();
    getPersonList();
})

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.stepItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid #ccc;
    &:first-of-type {
        margin-top: 30px;
    }
    &:last-of-type {
        margin-bottom: 0;
        border-left: none;
    }
    .stepNum {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-sizing: border-box;
        color: #333;
        border: 1px solid #999;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        margin-left: -16px;
        margin-top: -30px;
    }
    .stepCard {
        width: 100%;
        margin-top: -30px;

        .box-card {
            width: 100%;
            &:deep(.el-card__header) {
                padding: 10px 15px;
            }
            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > div:first-of-type {
                    margin-right: 80px;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
    &:hover .card-header {
        color: #0098f5;
    }
    &:hover .stepNum {
        border: 2px solid #0098f5;
        color: #0098f5;
    }
}

:deep(.el-date-editor) {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
:deep(.el-range-editor.is-disabled input){
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
</style>

 src/views/analyse/riskUnit/components/riskUnitDialog.vue

对比新文件
@@ -0,0 +1,209 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="riskUnitDialogState.title" v-model="riskUnitDialogState.riskUnitDialogVisible" width="600px">
            <el-form ref="riskUnitFormRef" :rules="riskUnitDialogState.riskUnitFormRules" :model="riskUnitDialogState.riskUnitForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="实验类型" prop="experimentType">
                            <el-select :disabled="riskUnitDialogState.title === '编辑'" v-model="riskUnitDialogState.experimentType" placeholder="实验类型" clearable class="input-length">
                                <el-option v-for="item in riskUnitDialogState.experimentTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="实验名称" prop="experimentId">
                            <el-select v-model="riskUnitDialogState.riskUnitForm.experimentId" placeholder="实验名称" clearable class="input-length">
                                <el-option v-for="item in riskUnitDialogState.allExperimentList" :key="item.id" :label="item.experimentName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 2">
                        <el-form-item label="风险单元编号" prop="riskCode">
                            <el-input v-model="riskUnitDialogState.riskUnitForm.riskCode" placeholder="风险单元编号" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 2">
                        <el-form-item label="风险单元名称" prop="riskName">
                            <el-input v-model="riskUnitDialogState.riskUnitForm.riskName" placeholder="风险单元名称" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 2">
                        <el-form-item label="负责人" prop="liabilityUserId">
                            <el-select v-model="riskUnitDialogState.riskUnitForm.liabilityUserId" placeholder="负责人" clearable class="input-length">
                                <el-option v-for="item in riskUnitDialogState.allPersonList" :key="item.id" :label="item.personName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 2">
                        <el-form-item label="负责部门" prop="liabilityDep">
                            <el-input v-model="riskUnitDialogState.riskUnitForm.liabilityDep" placeholder="负责部门" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 2">
                        <el-form-item label="风险单元描述">
                            <el-input type="textarea" :rows="3" v-model="riskUnitDialogState.riskUnitForm.description" placeholder="风险单元描述" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="riskUnitDialogState.experimentType === 1">
                        <el-form-item label="基础风险单元" prop="basicRiskUnitId">
                            <el-select v-model="riskUnitDialogState.riskUnitForm.basicRiskUnitId" placeholder="基础风险单元" clearable class="input-length">
                                <el-option v-for="item in riskUnitDialogState.basicUnitList" :key="item.id" :label="item.riskName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="riskUnitDialogState.riskUnitDialogVisible = !riskUnitDialogState.riskUnitDialogVisible" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmitRiskUnit" size="default">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { isValidKey } from "/@/utils/methods";
import {ElMessage} from "element-plus";
import {riskUnitApi} from "/@/api/analyse/riskUnit";

const riskUnitFormRef = ref()

const riskUnitDialogState = reactive<RiskUnitDialogType>({
    title: '',
    experimentType: null,
    riskUnitDialogVisible: false,
    riskUnitForm: {
        experimentId: null,
        riskCode: '',
        riskName: '',
        liabilityUserId: null,
        liabilityDep: '',
        description: '',
        basicRiskUnitId: null,
    },
    riskUnitFormRules: {
        experimentId: [{ required: true, message: '请选择实验', trigger: 'change' }],
        riskCode: [{ required: true, message: '请填写风险单元编号', trigger: 'blur' }],
        riskName: [{ required: true, message: '请填写风险单元名称', trigger: 'blur' }],
        liabilityUserId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        basicRiskUnitId: [{ required: true, message: '请选择基础风险单元', trigger: 'change' }]
    },
    specialDeviceList: [],
    deviceUnitList: [
        {id:1, name: '台'},
        {id:2, name: '个'},
        {id:3, name: '件'}
    ],
    basicUnitList: [],
    allPersonList: [],
    allExperimentList: [],
    experimentTypeList: [
        {id: 2, name: '实验风险'},
        {id: 1, name: '固有风险'},
    ],
})

const showRiskUnitDialog = (title: string, value: RiskUnitType, basicUnitList: UnitType [], allPersonList: AllPersonListType [], allExperimentList: ProjectType []) => {
    riskUnitDialogState.riskUnitDialogVisible = true;
    riskUnitDialogState.basicUnitList = basicUnitList
    riskUnitDialogState.allPersonList = allPersonList
    riskUnitDialogState.allExperimentList = allExperimentList
    setTimeout(() => {
        riskUnitFormRef.value.clearValidate();
    });
    if(title === '新增'){
        riskUnitDialogState.title = '新增';
        riskUnitDialogState.riskUnitForm = {
            experimentId: null,
            riskCode: '',
            riskName: '',
            liabilityUserId: null,
            liabilityDep: '',
            description: '',
            basicRiskUnitId: null,
        };
    }else{
        riskUnitDialogState.title = '编辑';
        riskUnitDialogState.experimentType = value.riskType as number
        for(let i in riskUnitDialogState.riskUnitForm) {
            if(isValidKey(i, riskUnitDialogState.riskUnitForm)) {
                riskUnitDialogState.riskUnitForm[i] = value[i];
            }
        }
        riskUnitDialogState.riskUnitForm.id = value.id
    }
};

const onSubmitRiskUnit = () => {
    riskUnitFormRef.value.validate(async(valid: boolean) => {
        if(valid){
            if(riskUnitDialogState.title === '新增' && riskUnitDialogState.experimentType === 1){
                let { basicRiskUnitId, ...query} = riskUnitDialogState.riskUnitForm
                let res = await riskUnitApi().addRiskUnit(query);
                if(res.data.code === 100){
                    emit('refresh')
                    riskUnitDialogState.riskUnitDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else if(riskUnitDialogState.title === '新增' && riskUnitDialogState.experimentType === 2){
                let { riskCode, riskName, liabilityUserId, liabilityDep, description, ...query} = riskUnitDialogState.riskUnitForm
                let res = await riskUnitApi().addBasicRiskUnit(query);
                if(res.data.code === 100){
                    emit('refresh')
                    riskUnitDialogState.riskUnitDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{
                let res = await riskUnitApi().modRiskUnit(riskUnitDialogState.riskUnitForm)
                if(res.data.code === 100){
                    emit('refresh')
                    riskUnitDialogState.riskUnitDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
    })
}

const emit = defineEmits(['refresh'])

defineExpose({
    showRiskUnitDialog
})
</script>

<style scoped>

</style>

 src/views/analyse/riskUnit/index.ts

对比新文件
@@ -0,0 +1,59 @@
declare interface RiskUnitStateType {
    riskUnitData:  RiskUnitType [],
    searchQuery: {
        pageIndex: number,
        pageSize: number,
        riskCode: string,
        riskName: string,
    }
    total: number
    riskList: Array<Type>,
    riskSourceList: Array<Type>
    evaluateStatusList: Array<Type>
    basicUnitList: Array<UnitType>
    allPersonList: Array<AllPersonListType>
    allExperimentList: Array<ProjectType>
}

declare interface RiskUnitType {
    id?: number
    experimentId: number | null,
    riskCode: string,
    riskName: string,
    liabilityDep: string,
    liabilityUserId: number | null,
    description: string,
    basicRiskUnitId: number | null,
    riskType?: number,
}

declare interface Type {
    id: number,
    name: string,
}

declare interface RiskUnitDialogType {
    title: string,
    experimentType: number | null,
    riskUnitDialogVisible: boolean,
    riskUnitForm: {
        id?: number
        experimentId: number | null,
        riskCode: string,
        riskName: string,
        liabilityDep: string,
        liabilityUserId: number | null,
        description: string,
        basicRiskUnitId: number | null,
        riskType?: number,
    },
    riskUnitFormRules: {

    },
    specialDeviceList: Array<Type>,
    deviceUnitList: Array<Type>,
    basicUnitList: Array<UnitType>,
    allPersonList: Array<AllPersonListType>,
    allExperimentList: Array<ProjectType>,
    experimentTypeList: Array<Type>
}

 src/views/analyse/riskUnit/index.vue

对比新文件
@@ -0,0 +1,358 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>风险编码：</span>
                    <el-input v-model="riskUnitState.searchQuery.riskCode" clearable filterable class="input-box" placeholder="风险编码">
                    </el-input>
                </div>
                <div class="basic-line">
                    <span>风险名称：</span>
                    <el-input v-model="riskUnitState.searchQuery.riskName" clearable filterable class="input-box" placeholder="风险名称">
                    </el-input>
                </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getRiskUnitData">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="openRiskUnitDialog('新增', {})">新增</el-button>
                            <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
                        </el-col>
<!--                        <el-button type="primary" :icon="Refresh" size="default" />-->
                    </el-row>
                    <el-table ref="multipleTableRef" :data="riskUnitState.riskUnitData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column prop="riskCode" label="风险编码"/>
                        <el-table-column prop="riskName" label="风险名称" />
                        <el-table-column prop="riskSourceType" label="风险源风险类型">
                            <template #default="scope">
                                <span>{{`${riskUnitState.riskSourceList.find(item =>item.id === scope.row.riskSourceType)?.name || ''}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="riskType" label="风险类型">
                            <template #default="scope">
                                <span>{{`${riskUnitState.riskList.find(item =>item.id === scope.row.riskType)?.name || ''}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="evaluateStatus" label="是否评价" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{`${riskUnitState.evaluateStatusList.find(item =>item.id === scope.row.evaluateStatus)?.name}`}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openRiskUnitDialog('修改', scope.row)" v-if="scope.row.riskType === 2">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelRiskUnit(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="riskUnitState.searchQuery.pageIndex" background v-model:page-size="riskUnitState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="riskUnitState.total" class="page-position"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <risk-unit-dialog ref="riskUnitDialogRef" @refresh="getRiskUnitData"></risk-unit-dialog>
    </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {riskUnitApi} from "/@/api/analyse/riskUnit";
import {ElMessage, ElMessageBox} from "element-plus";
import { Edit, View, Plus, Delete } from '@element-plus/icons-vue';
import { unitApi } from "/@/api/basic/unit";
import {personApi} from "/@/api/basic/person";
import { projectApi } from "/@/api/experiment/project";

const RiskUnitDialog = defineAsyncComponent(() => import('./components/riskUnitDialog.vue'));

const riskUnitDialogRef = ref();

const riskUnitState = reactive<RiskUnitStateType>({
    riskUnitData: [],
    searchQuery: {
        pageIndex: 1,
        pageSize: 10,
        riskCode: '',
        riskName: '',
    },
    total: 0,
    riskList: [
        {id: 1, name: '固有风险'},
        {id:2, name: '实验风险'}
    ],
    evaluateStatusList: [
        {id: 1, name: '未评价'},
        {id:2, name: '已评价'}
    ],
    riskSourceList: [
        {id:1, name: '区域、实验场所'},
        {id:2, name: '设施设备'},
        {id:3, name: '固定工艺节点'}
    ],
    basicUnitList: [],
    allPersonList: [],
    allExperimentList: [],
})

const getRiskUnitData = async () => {
    let res = await riskUnitApi().getRiskUnitByList(riskUnitState.searchQuery);
    if(res.data.code === 100){
        riskUnitState.riskUnitData = res.data.data;
        riskUnitState.total = res.data.total;
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getAllBasicUnitList = async () => {
    let res = await unitApi().getAllUnit();
    if(res.data.code === 100){
        riskUnitState.basicUnitList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const getAllPersonList = async () => {
    let res = await personApi().getAllPerson();
    if(res.data.code === 100){
        riskUnitState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const getAllExperimentList = async () => {
    let res = await projectApi().getAllExperiment()
    if(res.data.code === 100){
        riskUnitState.allExperimentList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const openRiskUnitDialog = (title: string, value: RiskUnitType) => {
    riskUnitDialogRef.value.showRiskUnitDialog(title, value, riskUnitState.basicUnitList, riskUnitState.allPersonList, riskUnitState.allExperimentList);
};

const onDelRiskUnit = (val: RiskUnitType) => {
    ElMessageBox.confirm(`此操作将永久删除该风险单元：“${val.riskName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await riskUnitApi().deleteRiskUnitById({ id: val.id });
            if (res.data.code === 100) {
                ElMessage({
                    type: 'success',
                    duration: 2000,
                    message: '删除成功'
                });
                await getRiskUnitData();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
        .catch((error) => {
        });
}

const onHandleSizeChange = (val: number) => {
    riskUnitState.searchQuery.pageSize = val;
    getRiskUnitData();
};

const onHandleCurrentChange = (val: number) => {
    riskUnitState.searchQuery.pageIndex = val;
    getRiskUnitData();
};

const reset = () => {
    riskUnitState.searchQuery = {
        pageIndex: 1,
        pageSize: 10,
        riskCode: '',
        riskName: '',
    }
};

onMounted(() => {
    getRiskUnitData();
    getAllBasicUnitList();
    getAllPersonList();
    getAllExperimentList();
})

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.stepItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid #ccc;
    &:first-of-type {
        margin-top: 30px;
    }
    &:last-of-type {
        margin-bottom: 0;
        border-left: none;
    }
    .stepNum {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-sizing: border-box;
        color: #333;
        border: 1px solid #999;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        margin-left: -16px;
        margin-top: -30px;
    }
    .stepCard {
        width: 100%;
        margin-top: -30px;

        .box-card {
            width: 100%;
            &:deep(.el-card__header) {
                padding: 10px 15px;
            }
            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > div:first-of-type {
                    margin-right: 80px;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
    &:hover .card-header {
        color: #0098f5;
    }
    &:hover .stepNum {
        border: 2px solid #0098f5;
        color: #0098f5;
    }
}

:deep(.el-date-editor) {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
</style>

 src/views/basic/equipment/components/equipmentDialog.vue

@@ -1,6 +1,6 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="equipmentDialogState.title" v-model="equipmentDialogState.equipmentDialogVisible" width="600px">
        <el-dialog :title="equipmentDialogState.title" v-model="equipmentDialogState.equipmentDialogVisible" :close-on-click-modal="false" width="600px">
            <el-form ref="EquipmentFormRef" :rules="equipmentDialogState.equipmentFormRules" :model="equipmentDialogState.equipmentForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">

 src/views/basic/equipment/index.vue

@@ -56,7 +56,7 @@
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openEquipmentDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openEquipmentDialog('修改', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelEquipment(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>

 src/views/basic/material/components/materialDialog.vue

@@ -1,6 +1,6 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="materialDialogState.title" v-model="materialDialogState.materialDialogVisible" width="600px">
        <el-dialog :title="materialDialogState.title" v-model="materialDialogState.materialDialogVisible"  :close-on-click-modal="false" width="600px">
            <el-form ref="MaterialFormRef" :rules="materialDialogState.materialFormRules" :model="materialDialogState.materialForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">

 src/views/basic/material/index.vue

@@ -56,7 +56,7 @@
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openMaterialDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openMaterialDialog('修改', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelMaterial(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
@@ -125,7 +125,7 @@
};

const onDelMaterial = (val: MaterialType) => {
    ElMessageBox.confirm(`此操作将永久删除该设备：“${val.stuffName}”，是否继续?`, '提示', {
    ElMessageBox.confirm(`此操作将永久删除该耗材：“${val.stuffName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'

 src/views/basic/person/components/personDialog.vue

@@ -1,6 +1,6 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="personDialogState.title" v-model="personDialogState.personDialogVisible" width="600px">
        <el-dialog :title="personDialogState.title" v-model="personDialogState.personDialogVisible" :close-on-click-modal="false" width="600px">
            <el-form ref="PersonFormRef" :rules="personDialogState.personFormRules" :model="personDialogState.personForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">

 src/views/basic/person/index.vue

@@ -55,7 +55,7 @@
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openPersonDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openPersonDialog('修改', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelPerson(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
@@ -118,7 +118,7 @@
};

const onDelPerson = (val: PersonType) => {
    ElMessageBox.confirm(`此操作将永久删除该设备：“${val.personName}”，是否继续?`, '提示', {
    ElMessageBox.confirm(`此操作将永久删除该用户：“${val.personName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'

 src/views/basic/room/components/roomDialog.vue

@@ -1,6 +1,6 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="roomDialogState.title" v-model="roomDialogState.roomDialogVisible" width="600px">
        <el-dialog :title="roomDialogState.title" v-model="roomDialogState.roomDialogVisible" :close-on-click-modal="false" width="600px">
            <el-form ref="roomFormRef" :rules="roomDialogState.roomFormRules" :model="roomDialogState.roomForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -46,10 +46,9 @@
        room: '',
    },
    roomFormRules: {
        deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
        siteName: [{ required: true, message: '请填写实验室名称', trigger: 'blur' }],
        floor: [{ required: true, message: '请填写楼名称', trigger: 'blur' }],
        room: [{ required: true, message: '请填写房间', trigger: 'blur' }],
    },
    specialDeviceList: [],
    deviceUnitList: [

 src/views/basic/room/index.vue

@@ -41,7 +41,7 @@
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openRoomDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openRoomDialog('修改', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelRoom(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
@@ -105,7 +105,7 @@
};

const onDelRoom = (val: RoomType) => {
    ElMessageBox.confirm(`此操作将永久删除该设备：“${val.siteName}”，是否继续?`, '提示', {
    ElMessageBox.confirm(`此操作将永久删除该场所：“${val.siteName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'

 src/views/basic/unit/components/unitDialog.vue

@@ -1,40 +1,48 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="unitDialogState.title" v-model="unitDialogState.unitDialogVisible" width="600px">
        <el-dialog :title="unitDialogState.title" v-model="unitDialogState.unitDialogVisible" :close-on-click-modal="false" width="600px">
            <el-form ref="UnitFormRef" :rules="unitDialogState.unitFormRules" :model="unitDialogState.unitForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="设备编号" prop="deviceCode">
                            <el-input v-model="unitDialogState.unitForm.deviceCode" placeholder="设备编号" clearable class="input-length"></el-input>
                        <el-form-item label="风险单元编号" prop="riskCode">
                            <el-input v-model="unitDialogState.unitForm.riskCode" placeholder="风险单元编号" clearable class="input-length"></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="deviceName">
                            <el-input v-model="unitDialogState.unitForm.deviceName" placeholder="设备名称" clearable class="input-length"></el-input>
                        <el-form-item label="风险单元名称" prop="riskName">
                            <el-input v-model="unitDialogState.unitForm.riskName" placeholder="风险单元名称" clearable class="input-length"></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="devicePower">
                            <el-input v-model="unitDialogState.unitForm.devicePower" placeholder="设备功率" clearable class="input-length"></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="deviceUnit">
                            <el-select v-model="unitDialogState.unitForm.deviceUnit" placeholder="计量单位" clearable class="input-length">
                                <el-option v-for="item in unitDialogState.deviceUnitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        <el-form-item label="风险源风险类型" prop="riskSourceType">
                            <el-select v-model="unitDialogState.unitForm.riskSourceType" @change="unitDialogState.unitForm.riskSourceId = null" placeholder="风险源风险类型" clearable class="input-length">
                                <el-option v-for="item in unitDialogState.riskSourceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="是否特种设备">
                            <el-select v-model="unitDialogState.unitForm.specialDevice" placeholder="是否特种设备" clearable class="input-length">
                                <el-option v-for="item in unitDialogState.specialDeviceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        <el-form-item label="风险源" prop="riskSourceId">
                            <el-select v-model="unitDialogState.unitForm.riskSourceId" placeholder="风险源" clearable class="input-length">
                                <el-option v-if="unitDialogState.unitForm.riskSourceType === 2"  v-for="item in unitDialogState.allEquipmentList" :key="item.id" :label="item.deviceName" :value="item.id"></el-option>
                                <el-option v-if="unitDialogState.unitForm.riskSourceType === 1" v-for="item in unitDialogState.allRoomList" :key="item.id" :label="item.room" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全防护">
                            <el-input type="textarea" :rows="3" v-model="unitDialogState.unitForm.safeProtect" placeholder="安全防护" clearable class="input-length"></el-input>
                        <el-form-item label="负责人" prop="liabilityUserId">
                            <el-select v-model="unitDialogState.unitForm.liabilityUserId" placeholder="负责人" clearable class="input-length">
                                <el-option v-for="item in unitDialogState.allPersonList" :key="item.id" :label="item.personName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="负责部门" prop="liabilityDep">
                            <el-input v-model="unitDialogState.unitForm.liabilityDep" placeholder="负责部门" clearable class="input-length"></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-input type="textarea" :rows="3" v-model="unitDialogState.unitForm.description" placeholder="风险单元描述" clearable class="input-length"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
@@ -60,18 +68,19 @@
    title: '',
    unitDialogVisible: false,
    unitForm: {
        id: null,
        deviceCode: '',
        deviceName: '',
        devicePower: '',
        deviceUnit: null,
        safeProtect: '',
        riskCode: '',
        riskName: '',
        riskSourceId: null,
        riskSourceType: null,
        liabilityUserId: null,
        liabilityDep: '',
        description: '',
    },
    unitFormRules: {
        deviceCode: [{ required: true, message: '请填写设备编号', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        devicePower: [{ required: true, message: '请填写设备功率', trigger: 'blur' }],
        deviceUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }]
        riskCode: [{ required: true, message: '请填写风险单元编号', trigger: 'blur' }],
        riskName: [{ required: true, message: '请填写风险单元名称', trigger: 'blur' }],
        riskSourceId: [{ required: true, message: '请选择风险源风险类型', trigger: 'change' }],
        riskSourceType: [{ required: true, message: '请选择风险源', trigger: 'change' }],
    },
    riskSourceTypeList: [
        {id: 1, name: '区域、实验场所'},
@@ -81,33 +90,42 @@
    evaluateStatusList: [
        {id: 1, name: '未评价'},
        {id:2, name: '已评价'},
    ]
    ],
    allRoomList: [],
    allEquipmentList: [],
    allPersonList: [],
})

const showUnitDialog = (title: string, value: UnitType) => {
const showUnitDialog = (title: string, value: UnitType, allEquipmentList: AllEquipmentListType [], allRoomList: RoomType [], allPersonList: AllPersonListType []) => {
    unitDialogState.unitDialogVisible = true;
    unitDialogState.allRoomList = allRoomList
    unitDialogState.allEquipmentList = allEquipmentList
    unitDialogState.allPersonList = allPersonList
    setTimeout(() => {
        UnitFormRef.value.clearValidate();
    });
    if(title === '新增'){
        unitDialogState.title = '新增';
        unitDialogState.unitForm = {
            id: null,
            deviceCode: '',
            deviceName: '',
            devicePower: '',
            deviceUnit: null,
            safeProtect: '',
            riskCode: '',
            riskName: '',
            riskSourceId: null,
            riskSourceType: null,
            liabilityUserId: null,
            liabilityDep: '',
            description: '',
        };
    }else{
        unitDialogState.title = '编辑'
        unitDialogState.unitForm = {
            id: value.id,
            deviceCode: value.deviceCode,
            deviceName: value.deviceName,
            devicePower: value.devicePower,
            deviceUnit: value.deviceUnit,
            safeProtect: value.safeProtect,
            riskCode: value.riskCode,
            riskName: value.riskName,
            riskSourceId: value.riskSourceId,
            riskSourceType: value.riskSourceType,
            liabilityUserId: value.liabilityUserId,
            liabilityDep: value.liabilityDep,
            description: value.description,
        };
    }
};

 src/views/basic/unit/index.ts

@@ -10,15 +10,20 @@
    total: number
    riskSourceTypeList: Array<Type>,
    evaluateStatusList: Array<Type>,
    allRoomList: Array<RoomType>,
    allEquipmentList: Array<AllEquipmentListType>,
    allPersonList: Array<AllPersonListType>,
}

declare interface UnitType {
    id: number | null,
    deviceCode: string,
    deviceName: string,
    devicePower: string,
    deviceUnit: number | null,
    safeProtect: string,
    id?: number | null,
    riskCode: string,
    riskName: string,
    riskSourceId: number | null,
    riskSourceType: number | null,
    liabilityUserId: number | null,
    liabilityDep: string,
    description: string,
}

declare interface Type {
@@ -30,16 +35,21 @@
    title: string,
    unitDialogVisible: boolean,
    unitForm: {
        id: number | null,
        deviceCode: string,
        deviceName: string,
        devicePower: string,
        deviceUnit: number | null,
        safeProtect: string,
        id?: number | null,
        riskCode: string,
        riskName: string,
        riskSourceId: number | null,
        riskSourceType: number | null,
        liabilityUserId: number | null,
        liabilityDep: string,
        description: string,
    },
    unitFormRules: {

    },
    riskSourceTypeList: Array<Type>,
    evaluateStatusList: Array<Type>,
    allRoomList: Array<RoomType>,
    allEquipmentList: Array<AllEquipmentListType>,
    allPersonList: Array<AllPersonListType>,
}

 src/views/basic/unit/index.vue

@@ -27,7 +27,7 @@
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="openunitDialog('新增', {})">新增</el-button>
                            <el-button type="primary" :icon="Plus" size="default" @click="openUnitDialog('新增', {})">新增</el-button>
                            <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
                        </el-col>
<!--                        <el-button type="primary" :icon="Refresh" size="default" />-->
@@ -53,7 +53,7 @@
                        <el-table-column prop="updateByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="Edit" @click="openUnitDialog('修改', scope.row)">修改</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="openUnitDialog('修改', scope.row)">编辑</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelUnit(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
@@ -73,6 +73,9 @@
import {unitApi} from "/@/api/basic/unit";
import {ElMessage, ElMessageBox} from "element-plus";
import { Edit, View, Plus, Delete } from '@element-plus/icons-vue';
import {roomApi} from "/@/api/basic/room";
import {equipmentApi} from "/@/api/basic/equipement";
import {personApi} from "/@/api/basic/person";

const UnitDialog = defineAsyncComponent(() => import('./components/unitDialog.vue'));

@@ -96,7 +99,10 @@
    evaluateStatusList: [
        {id: 1, name: '未评价'},
        {id:2, name: '已评价'},
    ]
    ],
    allRoomList: [],
    allEquipmentList: [],
    allPersonList: [],
})

const getUnitData = async () => {
@@ -111,12 +117,48 @@
    }
};

const getRoomData = async () => {
    let res = await roomApi().getAllRoom();
    if(res.data.code === 100){
        unitState.allRoomList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
};

const getAllEquipmentList = async () => {
    let res = await equipmentApi().getAllEquipment();
    if(res.data.code === 100){
        unitState.allEquipmentList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const getAllPersonList = async () => {
    let res = await personApi().getAllPerson();
    if(res.data.code === 100){
        unitState.allPersonList = JSON.parse(JSON.stringify(res.data.data));
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        })
    }
};

const openUnitDialog = (title: string, value: UnitType) => {
    unitDialogRef.value.showUnitDialog(title, value);
    unitDialogRef.value.showUnitDialog(title, value, unitState.allEquipmentList, unitState.allRoomList, unitState.allPersonList);
};

const onDelUnit = (val: UnitType) => {
    ElMessageBox.confirm(`此操作将永久删除该设备：“${val.deviceName}”，是否继续?`, '提示', {
    ElMessageBox.confirm(`此操作将永久删除该单元：“${val.riskName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
@@ -162,7 +204,10 @@
};

onMounted(() => {
    getUnitData()
    getUnitData();
    getRoomData();
    getAllEquipmentList();
    getAllPersonList();
})

</script>

 src/views/experiment/developing/index.ts

文件已删除

 src/views/experiment/project/index.ts

@@ -16,8 +16,10 @@
declare interface ProjectType {
    id?: number | null,
    experimentCode: string,
    experimentName: string,
}


declare interface Type {
    id: number,
    name: string,

 src/views/experiment/project/index.vue

@@ -29,6 +29,7 @@
                    </el-row>
                    <el-table ref="multipleTableRef" :data="projectState.projectData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column prop="experimentCode" label="实验编号"/>
                        <el-table-column prop="experimentName" label="实验名称"/>
                        <el-table-column prop="expectStartTime" label="立项时间" />
                        <el-table-column prop="liabilityUser" label="负责人"/>
                        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
@@ -39,7 +40,8 @@
                            <template #default="scope">
                                <el-button size="small" text type="primary" :icon="View" @click="openProjectDialog('查看', scope.row)">查看</el-button>
                                <el-button size="small" text type="primary" :icon="Edit" @click="applyStart('申请开展', scope.row)">申请开展</el-button>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelProject(scope.row)">删除</el-button>                            </template>
                                <el-button size="small" text type="danger" :icon="Delete" @click="onDelProject(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">

 src/views/loginPage/component/accountLogin.vue

@@ -84,7 +84,7 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";

import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
export default defineComponent({

 src/views/system/appVersion/index.vue

@@ -1,698 +1,698 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">app类型：</span>
                    <div class="grid-content topInfo">
                        <el-select v-model="searchType">
                            <el-option
                                    v-for="item in appTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">版本号：</span>
                    <div class="grid-content topInfo">
                        <el-input v-model="searchVersion"/>
                    </div>
                </el-col>
                <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">APP名称：</span>
                    <div class="grid-content topInfo">
                        <el-input v-model="searchName"/>
                    </div>
                </el-col>
                <el-button type="primary" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新增</el-button>
                        </el-col>
                        <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                    </el-row>
                    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">
<!--                        <el-table-column type="selection" width="100" />-->
                        <el-table-column type="index" label="排序" width="80" align="center"/>
                        <el-table-column property="appTypeDesc" label="文件类型" align="center" :show-overflow-tooltip="true"/>
                        <el-table-column property="name" label="app名称" align="center" :show-overflow-tooltip="true"/>
                        <el-table-column property="objectUrl" label="文件链接" align="center" :show-overflow-tooltip="true"/>
                        <el-table-column property="customVersion" label="版本号" align="center">
                            <template #default="scope">
                                <el-tag>{{ scope.row.customVersion }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column property="info" label="备注" align="center" :show-overflow-tooltip="true"/>
                        <el-table-column property="gmtCreate" label="创建时间" align="center"/>
                        <el-table-column property="gmtModified" label="更新时间" align="center"/>
                        <el-table-column fixed="right" label="操作" align="center" width="250">
                            <template #default="scope">
                                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">修改</el-button>
                                <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="APP版本信息">
            <el-form :model="details" label-width="120px">
                <el-form-item label="类型">
                    <el-input v-model="details.appTypeDesc" readonly />
                </el-form-item>
                <el-form-item label="app名称">
                    <el-input v-model="details.name" readonly/>
                </el-form-item>
                <el-form-item label="文件链接">
                    <el-input v-model="details.objectUrl" type="textarea" autosize readonly />
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="details.customVersion" type="textarea" readonly />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="details.info" type="textarea" readonly />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="details.gmtCreate" readonly />
                </el-form-item>
                <el-form-item label="更新时间">
                    <el-input v-model="details.gmtModified" readonly />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogAddRecord" title="APP版本信息编辑" @close="closeAdd" @open="openAdd">
            <el-form :model="addRecord" label-width="150px" ref="addRef" :rules="addRules">
                <el-form-item label="类型" prop="appType">
                    <el-select v-model="addRecord.appType">
                        <el-option
                                v-for="item in appTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="app名称" prop="name">
                    <el-input v-model="addRecord.name"/>
                </el-form-item>
                <el-form-item v-if="chosenIndex == null" label="上传文件" prop="objectName">
                    <el-upload :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='fileLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
                        <el-button type="primary" plain>选择文件</el-button>
                        <template #tip>
                            <div class="el-upload__tip">上传APP源文件</div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item v-else label="上传文件">
                    <el-upload :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='fileLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">
                        <el-button type="primary" plain>选择文件</el-button>
                        <template #tip>
                            <div class="el-upload__tip">上传新版APP源文件(不上传则默认使用原版本)</div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="自定义版本号" prop="customVersion">
                    <el-input v-model="addRecord.customVersion"> </el-input>
                </el-form-item>
                <el-form-item label="备注" prop="info">
                    <el-input v-model="addRecord.info" type="textarea" :rows="2" autosize> </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>
                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">
            <span>您确定要删除该条记录吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="deleteDialog = false" size="default">取消</el-button>
                    <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
                </span>
            </template>
        </el-dialog>
<!--        <el-dialog v-model="deleteSetDialog" title="提示" width="30%" center>-->
<!--            <span>您确定要删除这些记录吗？</span>-->
<!--<template>-->
<!--    <div class="home-container">-->
<!--        <div style="height: 100%">-->
<!--            <el-row class="homeCard">-->
<!--                <el-col :span="5" style="display:flex;align-items: center">-->
<!--                    <span style="white-space: nowrap">app类型：</span>-->
<!--                    <div class="grid-content topInfo">-->
<!--                        <el-select v-model="searchType">-->
<!--                            <el-option-->
<!--                                    v-for="item in appTypeList"-->
<!--                                    :key="item.id"-->
<!--                                    :label="item.name"-->
<!--                                    :value="item.id"-->
<!--                            />-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-col :span="5" style="display:flex;align-items: center">-->
<!--                    <span style="white-space: nowrap">版本号：</span>-->
<!--                    <div class="grid-content topInfo">-->
<!--                        <el-input v-model="searchVersion"/>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-col :span="5" style="display:flex;align-items: center">-->
<!--                    <span style="white-space: nowrap">APP名称：</span>-->
<!--                    <div class="grid-content topInfo">-->
<!--                        <el-input v-model="searchName"/>-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-button type="primary" @click="searchRecord">查询</el-button>-->
<!--                <el-button plain @click="clearSearch">重置</el-button>-->
<!--            </el-row>-->
<!--            <div class="homeCard">-->
<!--                <div class="main-card">-->
<!--                    <el-row class="cardTop">-->
<!--                        <el-col :span="12" class="mainCardBtn">-->
<!--                            <el-button type="primary" :icon="Plus" size="default" @click="dialogAddRecord = true">新增</el-button>-->
<!--                        </el-col>-->
<!--                        <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />-->
<!--                    </el-row>-->
<!--                    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
<!--&lt;!&ndash;                        <el-table-column type="selection" width="100" />&ndash;&gt;-->
<!--                        <el-table-column type="index" label="排序" width="80" align="center"/>-->
<!--                        <el-table-column property="appTypeDesc" label="文件类型" align="center" :show-overflow-tooltip="true"/>-->
<!--                        <el-table-column property="name" label="app名称" align="center" :show-overflow-tooltip="true"/>-->
<!--                        <el-table-column property="objectUrl" label="文件链接" align="center" :show-overflow-tooltip="true"/>-->
<!--                        <el-table-column property="customVersion" label="版本号" align="center">-->
<!--                            <template #default="scope">-->
<!--                                <el-tag>{{ scope.row.customVersion }}</el-tag>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                        <el-table-column property="info" label="备注" align="center" :show-overflow-tooltip="true"/>-->
<!--                        <el-table-column property="gmtCreate" label="创建时间" align="center"/>-->
<!--                        <el-table-column property="gmtModified" label="更新时间" align="center"/>-->
<!--                        <el-table-column fixed="right" label="操作" align="center" width="250">-->
<!--                            <template #default="scope">-->
<!--                                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>-->
<!--                                <el-button link type="primary" size="small" :icon="Edit" @click="editRecordBtn(scope.$index, scope.row)">修改</el-button>-->
<!--                                <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">删除</el-button>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->
<!--                    <div class="pageBtn">-->
<!--                        <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <el-dialog v-model="dialogDetails" title="APP版本信息">-->
<!--            <el-form :model="details" label-width="120px">-->
<!--                <el-form-item label="类型">-->
<!--                    <el-input v-model="details.appTypeDesc" readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="app名称">-->
<!--                    <el-input v-model="details.name" readonly/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="文件链接">-->
<!--                    <el-input v-model="details.objectUrl" type="textarea" autosize readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="版本号">-->
<!--                    <el-input v-model="details.customVersion" type="textarea" readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="备注">-->
<!--                    <el-input v-model="details.info" type="textarea" readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="创建时间">-->
<!--                    <el-input v-model="details.gmtCreate" readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="更新时间">-->
<!--                    <el-input v-model="details.gmtModified" readonly />-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
<!--        <el-dialog v-model="dialogAddRecord" title="APP版本信息编辑" @close="closeAdd" @open="openAdd">-->
<!--            <el-form :model="addRecord" label-width="150px" ref="addRef" :rules="addRules">-->
<!--                <el-form-item label="类型" prop="appType">-->
<!--                    <el-select v-model="addRecord.appType">-->
<!--                        <el-option-->
<!--                                v-for="item in appTypeList"-->
<!--                                :key="item.id"-->
<!--                                :label="item.name"-->
<!--                                :value="item.id"-->
<!--                        />-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="app名称" prop="name">-->
<!--                    <el-input v-model="addRecord.name"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item v-if="chosenIndex == null" label="上传文件" prop="objectName">-->
<!--                    <el-upload :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='fileLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">-->
<!--                        <el-button type="primary" plain>选择文件</el-button>-->
<!--                        <template #tip>-->
<!--                            <div class="el-upload__tip">上传APP源文件</div>-->
<!--                        </template>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->
<!--                <el-form-item v-else label="上传文件">-->
<!--                    <el-upload :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='fileLimit' v-model:file-list="fileList" :http-request="upload" :action="uploadUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload="getUploadUrl">-->
<!--                        <el-button type="primary" plain>选择文件</el-button>-->
<!--                        <template #tip>-->
<!--                            <div class="el-upload__tip">上传新版APP源文件(不上传则默认使用原版本)</div>-->
<!--                        </template>-->
<!--                    </el-upload>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="自定义版本号" prop="customVersion">-->
<!--                    <el-input v-model="addRecord.customVersion"> </el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="备注" prop="info">-->
<!--                    <el-input v-model="addRecord.info" type="textarea" :rows="2" autosize> </el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="warning" @click="dialogAddRecord = false" size="default" plain>取消</el-button>-->
<!--                    <el-button type="primary" @click="confirmAddRecord(addRef)" size="default">确认</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
<!--        <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear">-->
<!--            <span>您确定要删除该条记录吗？</span>-->
<!--            <template #footer>-->
<!--                <span class="dialog-footer">-->
<!--                    <el-button @click="deleteSetDialog = false" size="default">取消</el-button>-->
<!--                    <el-button type="primary" @click="conFirmDeleteBatch" size="default">确认</el-button>-->
<!--                    <el-button @click="deleteDialog = false" size="default">取消</el-button>-->
<!--                    <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>-->
<!--                </span>-->
<!--            </template>-->
<!--        </el-dialog>-->
    </div>
</template>
<!--&lt;!&ndash;        <el-dialog v-model="deleteSetDialog" title="提示" width="30%" center>&ndash;&gt;-->
<!--&lt;!&ndash;            <span>您确定要删除这些记录吗？</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <template #footer>&ndash;&gt;-->
<!--&lt;!&ndash;                <span class="dialog-footer">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-button @click="deleteSetDialog = false" size="default">取消</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-button type="primary" @click="conFirmDeleteBatch" size="default">确认</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                </span>&ndash;&gt;-->
<!--&lt;!&ndash;            </template>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-dialog>&ndash;&gt;-->
<!--    </div>-->
<!--</template>-->

<script lang="ts">
import { toRefs, reactive, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { appVersionApi } from '/@/api/systemManage/appVersion';
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
import axios from "axios";
<!--<script lang="ts">-->
<!--import { toRefs, reactive, ref, onMounted } from 'vue';-->
<!--import { storeToRefs } from 'pinia';-->
<!--import { initBackEndControlRoutes } from '/@/router/backEnd';-->
<!--import { useUserInfo } from '/@/stores/userInfo';-->
<!--import { Session } from '/@/utils/storage';-->
<!--import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';-->
<!--import { ElMessage, ElMessageBox } from 'element-plus';-->
<!--import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'-->
<!--import { appVersionApi } from '/@/api/systemManage/appVersion';-->
<!--import {workApplyApi} from "/@/api/specialWorkSystem/workApply";-->
<!--import axios from "axios";-->

// 定义接口来定义对象的类型
interface stateType {
    tableData: Array<any>;
    multipleSelection: Array<any>;
    deleteArr: Array<any>;
    dialogDetails: boolean;
    dialogAddRecord: boolean;
    deleteDialog: boolean;
    deleteSetDialog: boolean;
    pageIndex: number;
    pageSize: number;
    chosenIndex: null | number;
    deleteId: null | number;
    searchType: number;
    appTypeList: Array<any>;
    searchVersion: string;
    searchName: string;
    totalSize: number;
    addRecord: {};
    details: {};
    fileLimit: number;
    uploadUrl: string;
    fileList: Array<file>
}
interface file {
    url: string;
}
export default {
    name: 'appVersion',
    components: {},
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const state = reactive<stateType>({
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            chosenIndex: null,
            searchType: 1,
            appTypeList: [
                {
                    name: '国泰app',
                    id: 1
                },
                {
                    name: '其他',
                    id: 0
                }
            ],
            searchVersion: '',
            searchName: '',
            tableData: [],
            fileLimit: 1,
            uploadUrl: '',
            multipleSelection: [],
            dialogDetails: false,
            dialogAddRecord: false,
            deleteDialog: false,
            deleteSetDialog: false,
            addRecord: {
                appType: 1,
                name: '',
                objectName: '',
                info: '',
                customVersion: ''
            },
            details: {},
            deleteId: null,
            deleteArr: [],
            fileList: []
        });
        interface User {
<!--// 定义接口来定义对象的类型-->
<!--interface stateType {-->
<!--    tableData: Array<any>;-->
<!--    multipleSelection: Array<any>;-->
<!--    deleteArr: Array<any>;-->
<!--    dialogDetails: boolean;-->
<!--    dialogAddRecord: boolean;-->
<!--    deleteDialog: boolean;-->
<!--    deleteSetDialog: boolean;-->
<!--    pageIndex: number;-->
<!--    pageSize: number;-->
<!--    chosenIndex: null | number;-->
<!--    deleteId: null | number;-->
<!--    searchType: number;-->
<!--    appTypeList: Array<any>;-->
<!--    searchVersion: string;-->
<!--    searchName: string;-->
<!--    totalSize: number;-->
<!--    addRecord: {};-->
<!--    details: {};-->
<!--    fileLimit: number;-->
<!--    uploadUrl: string;-->
<!--    fileList: Array<file>-->
<!--}-->
<!--interface file {-->
<!--    url: string;-->
<!--}-->
<!--export default {-->
<!--    name: 'appVersion',-->
<!--    components: {},-->
<!--    setup() {-->
<!--        const userInfo = useUserInfo();-->
<!--        const { userInfos } = storeToRefs(userInfo);-->
<!--        const state = reactive<stateType>({-->
<!--            pageIndex: 1,-->
<!--            pageSize: 10,-->
<!--            totalSize: 0,-->
<!--            chosenIndex: null,-->
<!--            searchType: 1,-->
<!--            appTypeList: [-->
<!--                {-->
<!--                    name: '国泰app',-->
<!--                    id: 1-->
<!--                },-->
<!--                {-->
<!--                    name: '其他',-->
<!--                    id: 0-->
<!--                }-->
<!--            ],-->
<!--            searchVersion: '',-->
<!--            searchName: '',-->
<!--            tableData: [],-->
<!--            fileLimit: 1,-->
<!--            uploadUrl: '',-->
<!--            multipleSelection: [],-->
<!--            dialogDetails: false,-->
<!--            dialogAddRecord: false,-->
<!--            deleteDialog: false,-->
<!--            deleteSetDialog: false,-->
<!--            addRecord: {-->
<!--                appType: 1,-->
<!--                name: '',-->
<!--                objectName: '',-->
<!--                info: '',-->
<!--                customVersion: ''-->
<!--            },-->
<!--            details: {},-->
<!--            deleteId: null,-->
<!--            deleteArr: [],-->
<!--            fileList: []-->
<!--        });-->
<!--        interface User {-->

        }
        // const multipleTableRef = ref<InstanceType<typeof ElTable>>();
        // const toggleSelection = (rows?: User[]) => {
        //     if (rows) {
        //         rows.forEach((row) => {
        //             // TODO: improvement typing when refactor table
        //             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //             // @ts-expect-error
        //             multipleTableRef.value!.toggleRowSelection(row, undefined);
        //         });
        //     } else {
        //         multipleTableRef.value!.clearSelection();
        //     }
        // };
<!--        }-->
<!--        // const multipleTableRef = ref<InstanceType<typeof ElTable>>();-->
<!--        // const toggleSelection = (rows?: User[]) => {-->
<!--        //     if (rows) {-->
<!--        //         rows.forEach((row) => {-->
<!--        //             // TODO: improvement typing when refactor table-->
<!--        //             // eslint-disable-next-line @typescript-eslint/ban-ts-comment-->
<!--        //             // @ts-expect-error-->
<!--        //             multipleTableRef.value!.toggleRowSelection(row, undefined);-->
<!--        //         });-->
<!--        //     } else {-->
<!--        //         multipleTableRef.value!.clearSelection();-->
<!--        //     }-->
<!--        // };-->

        // 多选
        // const handleSelectionChange = (val: User[]) => {
        //     state.multipleSelection = JSON.parse(JSON.stringify(val));
        //     state.deleteArr = state.multipleSelection.map((item) => {
        //         item = item.id;
        //         return item;
        //     });
        // };
<!--        // 多选-->
<!--        // const handleSelectionChange = (val: User[]) => {-->
<!--        //     state.multipleSelection = JSON.parse(JSON.stringify(val));-->
<!--        //     state.deleteArr = state.multipleSelection.map((item) => {-->
<!--        //         item = item.id;-->
<!--        //         return item;-->
<!--        //     });-->
<!--        // };-->

        const addRef = ref<FormInstance>();
        const addRules = reactive<FormRules>({
            appType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            objectName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            customVersion: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            info: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
        });
<!--        const addRef = ref<FormInstance>();-->
<!--        const addRules = reactive<FormRules>({-->
<!--            appType: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],-->
<!--            name: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],-->
<!--            objectName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],-->
<!--            customVersion: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],-->
<!--            info: [{ required: true, message: '该内容不能为空', trigger: 'blur' }]-->
<!--        });-->

        // 页面载入时执行方法
        onMounted(() => {
            getListByPage();
        });
<!--        // 页面载入时执行方法-->
<!--        onMounted(() => {-->
<!--            getListByPage();-->
<!--        });-->

        // 分页获取物资标准列表
        const getListByPage = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { appType: state.searchType, customVersion: state.searchVersion, appName: state.searchName} };
            let res = await appVersionApi().getRecordPage(data);
            if (res.data.code === '200') {
                state.tableData = JSON.parse(JSON.stringify(res.data.data))
                state.totalSize = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
<!--        // 分页获取物资标准列表-->
<!--        const getListByPage = async () => {-->
<!--            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex, searchParams: { appType: state.searchType, customVersion: state.searchVersion, appName: state.searchName} };-->
<!--            let res = await appVersionApi().getRecordPage(data);-->
<!--            if (res.data.code === '200') {-->
<!--                state.tableData = JSON.parse(JSON.stringify(res.data.data))-->
<!--                state.totalSize = res.data.total;-->
<!--            } else {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: res.data.msg-->
<!--                });-->
<!--            }-->
<!--        };-->

        // const handleChange = async (value) => {
        //     state.addRecord.depId = value;
        //     console.log(state.addRecord.department, 'de');
        //     let res = await appVersionApi().getAllMember(value);
        //     if (res.data.code === '200') {
        //         state.workerList = res.data.data;
        //     } else {
        //         ElMessage({
        //             type: 'warning',
        //             message: res.data.msg
        //         });
        //     }
        // };
<!--        // const handleChange = async (value) => {-->
<!--        //     state.addRecord.depId = value;-->
<!--        //     console.log(state.addRecord.department, 'de');-->
<!--        //     let res = await appVersionApi().getAllMember(value);-->
<!--        //     if (res.data.code === '200') {-->
<!--        //         state.workerList = res.data.data;-->
<!--        //     } else {-->
<!--        //         ElMessage({-->
<!--        //             type: 'warning',-->
<!--        //             message: res.data.msg-->
<!--        //         });-->
<!--        //     }-->
<!--        // };-->

        // 关键词查询记录
        const searchRecord = async () => {
            if (state.searchType == null && state.searchVersion == '' && state.searchName == '') {
                ElMessage({
                    type: 'warning',
                    message: '请输入查询关键词'
                });
            } else {
                getListByPage();
            }
        };
<!--        // 关键词查询记录-->
<!--        const searchRecord = async () => {-->
<!--            if (state.searchType == null && state.searchVersion == '' && state.searchName == '') {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: '请输入查询关键词'-->
<!--                });-->
<!--            } else {-->
<!--                getListByPage();-->
<!--            }-->
<!--        };-->

        const clearSearch = async () => {
            state.searchType = 1
            state.searchVersion = ''
            state.searchName = ''
            getListByPage();
        };
<!--        const clearSearch = async () => {-->
<!--            state.searchType = 1-->
<!--            state.searchVersion = ''-->
<!--            state.searchName = ''-->
<!--            getListByPage();-->
<!--        };-->

        const showTip =()=>{
            ElMessage({
                type: 'warning',
                message: '超出文件上传数量'
            });
        }
<!--        const showTip =()=>{-->
<!--            ElMessage({-->
<!--                type: 'warning',-->
<!--                message: '超出文件上传数量'-->
<!--            });-->
<!--        }-->

        const getUploadUrl = async (rawFile: any) => {
            const res = await appVersionApi().getUploadUrl({ filename: rawFile.name });
            state.addRecord.objectName = res.data.data.objectName
            state.uploadUrl = res.data.data.presignedUrl;
        };
<!--        const getUploadUrl = async (rawFile: any) => {-->
<!--            const res = await appVersionApi().getUploadUrl({ filename: rawFile.name });-->
<!--            state.addRecord.objectName = res.data.data.objectName-->
<!--            state.uploadUrl = res.data.data.presignedUrl;-->
<!--        };-->

        const upload = async (params: any) => {
            // const formData = new FormData();
            // formData.append('file', state.fileList[0].raw);
            let reader = new FileReader();
            reader.readAsArrayBuffer(params.file);
            reader.onload = async () => {
                axios
                    .put(state.uploadUrl, reader.result, {
                        header: { 'Content-Type': 'multipart/form-data' }
                    })
                    .then(() => {
                        // if (state.fileList.length === 2) {
                        //     state.fileList.splice(0, 1);
                        // }
                        // console.log(state.form.workDetail.gbPath,'gbpath')
                    });
            };
        };
<!--        const upload = async (params: any) => {-->
<!--            // const formData = new FormData();-->
<!--            // formData.append('file', state.fileList[0].raw);-->
<!--            let reader = new FileReader();-->
<!--            reader.readAsArrayBuffer(params.file);-->
<!--            reader.onload = async () => {-->
<!--                axios-->
<!--                    .put(state.uploadUrl, reader.result, {-->
<!--                        header: { 'Content-Type': 'multipart/form-data' }-->
<!--                    })-->
<!--                    .then(() => {-->
<!--                        // if (state.fileList.length === 2) {-->
<!--                        //     state.fileList.splice(0, 1);-->
<!--                        // }-->
<!--                        // console.log(state.form.workDetail.gbPath,'gbpath')-->
<!--                    });-->
<!--            };-->
<!--        };-->

        const beforeRemove = (file: {}, fileList: []) => {
            const result = new Promise((resolve, reject) => {
                ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        // console.log(state.workDetail.gbPath,'path')
                        state.fileList = []
                        // 请求删除接口
                        deletePic(state.addRecord.objectName)
                        state.addRecord.objectName = null
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
            return result;
        };
        // 删除图片接口
        const deletePic = async(fileName:string)=>{
            const res = await workApplyApi().deleteFile({fileName: fileName})
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '删除成功！'
                });
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        }
<!--        const beforeRemove = (file: {}, fileList: []) => {-->
<!--            const result = new Promise((resolve, reject) => {-->
<!--                ElMessageBox.confirm('此操作将删除该图片, 是否继续?', '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                })-->
<!--                    .then(() => {-->
<!--                        // console.log(state.workDetail.gbPath,'path')-->
<!--                        state.fileList = []-->
<!--                        // 请求删除接口-->
<!--                        deletePic(state.addRecord.objectName)-->
<!--                        state.addRecord.objectName = null-->
<!--                    })-->
<!--                    .catch(() => {-->
<!--                        reject(false);-->
<!--                    });-->
<!--            });-->
<!--            return result;-->
<!--        };-->
<!--        // 删除图片接口-->
<!--        const deletePic = async(fileName:string)=>{-->
<!--            const res = await workApplyApi().deleteFile({fileName: fileName})-->
<!--            if (res.data.code === '200') {-->
<!--                ElMessage({-->
<!--                    type: 'success',-->
<!--                    message: '删除成功！'-->
<!--                });-->
<!--            } else {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: res.data.msg-->
<!--                });-->
<!--            }-->
<!--        }-->

        // 添加班组管理方法
        const addRecord = async (data: any) => {
            let res = await appVersionApi().addRecord(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '添加成功！'
                });
                state.fileList = []
                getListByPage();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
<!--        // 添加班组管理方法-->
<!--        const addRecord = async (data: any) => {-->
<!--            let res = await appVersionApi().addRecord(data);-->
<!--            if (res.data.code === '200') {-->
<!--                ElMessage({-->
<!--                    type: 'success',-->
<!--                    message: '添加成功！'-->
<!--                });-->
<!--                state.fileList = []-->
<!--                getListByPage();-->
<!--            } else {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: res.data.msg-->
<!--                });-->
<!--            }-->
<!--        };-->

        // 修改工作时段方法
        const editRecordBtn = async (index, row) => {
            console.log(row,'row')
            state.addRecord = JSON.parse(JSON.stringify(row));
            state.dialogAddRecord = true;
            state.chosenIndex = index;
        };
<!--        // 修改工作时段方法-->
<!--        const editRecordBtn = async (index, row) => {-->
<!--            console.log(row,'row')-->
<!--            state.addRecord = JSON.parse(JSON.stringify(row));-->
<!--            state.dialogAddRecord = true;-->
<!--            state.chosenIndex = index;-->
<!--        };-->

        const editRecord = async (data: any) => {
            let res = await appVersionApi().updateRecord(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '修改成功！'
                });
                getListByPage();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
<!--        const editRecord = async (data: any) => {-->
<!--            let res = await appVersionApi().updateRecord(data);-->
<!--            if (res.data.code === '200') {-->
<!--                ElMessage({-->
<!--                    type: 'success',-->
<!--                    message: '修改成功！'-->
<!--                });-->
<!--                getListByPage();-->
<!--            } else {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: res.data.msg-->
<!--                });-->
<!--            }-->
<!--        };-->

        // 新增修改记录
        const confirmAddRecord = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate(async (valid, fields) => {
                if (valid) {
                    const data = {
                        appType: state.addRecord.appType,
                        appName: state.addRecord.name,
                        objectName: state.addRecord.objectName,
                        info: state.addRecord.info,
                        customVersion: state.addRecord.customVersion
                    };
                    if (state.chosenIndex == null) {
                        await addRecord(data);
                    } else {
                        data.id = JSON.stringify(state.addRecord.id);
                        await editRecord(data);
                    }
                    state.dialogAddRecord = false;
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
<!--        // 新增修改记录-->
<!--        const confirmAddRecord = async (formEl: FormInstance | undefined) => {-->
<!--            if (!formEl) return;-->
<!--            await formEl.validate(async (valid, fields) => {-->
<!--                if (valid) {-->
<!--                    const data = {-->
<!--                        appType: state.addRecord.appType,-->
<!--                        appName: state.addRecord.name,-->
<!--                        objectName: state.addRecord.objectName,-->
<!--                        info: state.addRecord.info,-->
<!--                        customVersion: state.addRecord.customVersion-->
<!--                    };-->
<!--                    if (state.chosenIndex == null) {-->
<!--                        await addRecord(data);-->
<!--                    } else {-->
<!--                        data.id = JSON.stringify(state.addRecord.id);-->
<!--                        await editRecord(data);-->
<!--                    }-->
<!--                    state.dialogAddRecord = false;-->
<!--                } else {-->
<!--                    console.log('error submit!', fields);-->
<!--                }-->
<!--            });-->
<!--        };-->

        // 删除工作时间组方法
        const deleteRecord = async (data: any) => {
            let res = await appVersionApi().deleteRecord(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '删除成功！'
                });
                getListByPage();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
<!--        // 删除工作时间组方法-->
<!--        const deleteRecord = async (data: any) => {-->
<!--            let res = await appVersionApi().deleteRecord(data);-->
<!--            if (res.data.code === '200') {-->
<!--                ElMessage({-->
<!--                    type: 'success',-->
<!--                    message: '删除成功！'-->
<!--                });-->
<!--                getListByPage();-->
<!--            } else {-->
<!--                ElMessage({-->
<!--                    type: 'warning',-->
<!--                    message: res.data.msg-->
<!--                });-->
<!--            }-->
<!--        };-->

        const deleteRecordBtn = (row) => {
            console.log(row, 'row');
            state.deleteId = row.id;
            state.deleteDialog = true;
        };
<!--        const deleteRecordBtn = (row) => {-->
<!--            console.log(row, 'row');-->
<!--            state.deleteId = row.id;-->
<!--            state.deleteDialog = true;-->
<!--        };-->

        const conFirmDelete = () => {
            deleteRecord({ id: state.deleteId });
            state.deleteDialog = false;
        };
<!--        const conFirmDelete = () => {-->
<!--            deleteRecord({ id: state.deleteId });-->
<!--            state.deleteDialog = false;-->
<!--        };-->

        // 批量删除
        // const deleteBatchBtn = async () => {
        //     ElMessage({
        //         type: 'warning',
        //         message: '抱歉，本页面暂不支持批量删除'
        //     });
            // if (state.deleteArr.length > 0) {
            //     state.deleteSetDialog = true
            // } else {
            //     ElMessage({
            //         type: 'warning',
            //         message: '请先选择要删除的记录'
            //     });
            // }
        // };
<!--        // 批量删除-->
<!--        // const deleteBatchBtn = async () => {-->
<!--        //     ElMessage({-->
<!--        //         type: 'warning',-->
<!--        //         message: '抱歉，本页面暂不支持批量删除'-->
<!--        //     });-->
<!--            // if (state.deleteArr.length > 0) {-->
<!--            //     state.deleteSetDialog = true-->
<!--            // } else {-->
<!--            //     ElMessage({-->
<!--            //         type: 'warning',-->
<!--            //         message: '请先选择要删除的记录'-->
<!--            //     });-->
<!--            // }-->
<!--        // };-->

        // const conFirmDeleteBatch = async () => {
        //     let res = await appVersionApi().deletBatchRecord({ids: state.deleteArr});
        //     if (res.data.code === '200') {
        //         state.deleteSetDialog = false
        //         ElMessage({
        //             type: 'success',
        //             message: res.data.msg
        //         });
        //         getListByPage()
        //     } else {
        //         ElMessage({
        //             type: 'warning',
        //             message: res.data.msg
        //         });
        //         state.deleteSetDialog = false
        //     }
        // }
<!--        // const conFirmDeleteBatch = async () => {-->
<!--        //     let res = await appVersionApi().deletBatchRecord({ids: state.deleteArr});-->
<!--        //     if (res.data.code === '200') {-->
<!--        //         state.deleteSetDialog = false-->
<!--        //         ElMessage({-->
<!--        //             type: 'success',-->
<!--        //             message: res.data.msg-->
<!--        //         });-->
<!--        //         getListByPage()-->
<!--        //     } else {-->
<!--        //         ElMessage({-->
<!--        //             type: 'warning',-->
<!--        //             message: res.data.msg-->
<!--        //         });-->
<!--        //         state.deleteSetDialog = false-->
<!--        //     }-->
<!--        // }-->

        const handleSizeChange = (val: number) => {
            state.pageSize = val;
            getListByPage();
        };
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val;
            getListByPage();
        };
<!--        const handleSizeChange = (val: number) => {-->
<!--            state.pageSize = val;-->
<!--            getListByPage();-->
<!--        };-->
<!--        const handleCurrentChange = (val: number) => {-->
<!--            state.pageIndex = val;-->
<!--            getListByPage();-->
<!--        };-->

        // 查看记录
        const viewRecord = (row) => {
            state.details = JSON.parse(JSON.stringify(row));
            state.dialogDetails = true;
        };
<!--        // 查看记录-->
<!--        const viewRecord = (row) => {-->
<!--            state.details = JSON.parse(JSON.stringify(row));-->
<!--            state.dialogDetails = true;-->
<!--        };-->

        // 刷新
        const reLoadData = async () => {
            getListByPage();
        };
<!--        // 刷新-->
<!--        const reLoadData = async () => {-->
<!--            getListByPage();-->
<!--        };-->

        const closeAdd = () => {
            state.addRecord = {
                appType: 1,
                name: '',
                objectName: '',
                info: '',
                customVersion: ''
            }
            state.uploadUrl = ''
            state.fileList = []
            state.chosenIndex = null;
        };
        const openAdd = () => {
            if (state.chosenIndex == null) {
                state.addRecord.info = '';
            }
        };
        const indexClear = () => {
            state.deleteId = null;
        };
<!--        const closeAdd = () => {-->
<!--            state.addRecord = {-->
<!--                appType: 1,-->
<!--                name: '',-->
<!--                objectName: '',-->
<!--                info: '',-->
<!--                customVersion: ''-->
<!--            }-->
<!--            state.uploadUrl = ''-->
<!--            state.fileList = []-->
<!--            state.chosenIndex = null;-->
<!--        };-->
<!--        const openAdd = () => {-->
<!--            if (state.chosenIndex == null) {-->
<!--                state.addRecord.info = '';-->
<!--            }-->
<!--        };-->
<!--        const indexClear = () => {-->
<!--            state.deleteId = null;-->
<!--        };-->

        // 折线图
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
        };
        return {
            addRef,
            addRules,
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            searchRecord,
            clearSearch,
            viewRecord,
            deleteRecordBtn,
            conFirmDelete,
            getListByPage,
            reLoadData,
            deleteRecord,
            showTip,
            getUploadUrl,
            upload,
            beforeRemove,
            handleSizeChange,
            handleCurrentChange,
            confirmAddRecord,
            closeAdd,
            openAdd,
            indexClear,
            editRecordBtn,
            ...toRefs(state)
        };
    }
};
</script>
<!--        // 折线图-->
<!--        const renderMenu = async (value: string) => {-->
<!--            Session.set('projectId', value);-->
<!--            userInfos.value.projectId = value;-->
<!--            await initBackEndControlRoutes();-->
<!--        };-->
<!--        return {-->
<!--            addRef,-->
<!--            addRules,-->
<!--            View,-->
<!--            Edit,-->
<!--            Delete,-->
<!--            Refresh,-->
<!--            Plus,-->
<!--            searchRecord,-->
<!--            clearSearch,-->
<!--            viewRecord,-->
<!--            deleteRecordBtn,-->
<!--            conFirmDelete,-->
<!--            getListByPage,-->
<!--            reLoadData,-->
<!--            deleteRecord,-->
<!--            showTip,-->
<!--            getUploadUrl,-->
<!--            upload,-->
<!--            beforeRemove,-->
<!--            handleSizeChange,-->
<!--            handleCurrentChange,-->
<!--            confirmAddRecord,-->
<!--            closeAdd,-->
<!--            openAdd,-->
<!--            indexClear,-->
<!--            editRecordBtn,-->
<!--            ...toRefs(state)-->
<!--        };-->
<!--    }-->
<!--};-->
<!--</script>-->

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
<!--<style scoped lang="scss">-->
<!--$homeNavLengh: 8;-->
<!--.home-container {-->
<!--    height: calc(100vh - 144px);-->
<!--    box-sizing: border-box;-->
<!--    overflow: hidden;-->
<!--    .homeCard {-->
<!--        width: 100%;-->
<!--        padding: 20px;-->
<!--        box-sizing: border-box;-->
<!--        background: #fff;-->
<!--        border-radius: 4px;-->

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;
<!--        .main-card {-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            .cardTop {-->
<!--                display: flex;-->
<!--                align-items: center;-->
<!--                justify-content: space-between;-->
<!--                margin-bottom: 20px;-->
<!--                .mainCardBtn {-->
<!--                    margin: 0;-->
<!--                }-->
<!--            }-->
<!--            .pageBtn {-->
<!--                height: 60px;-->
<!--                display: flex;-->
<!--                align-items: center;-->
<!--                justify-content: right;-->

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }
<!--                .demo-pagination-block + .demo-pagination-block {-->
<!--                    margin-top: 10px;-->
<!--                }-->
<!--                .demo-pagination-block .demonstration {-->
<!--                    margin-bottom: 16px;-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--        &:last-of-type {-->
<!--            height: calc(100% - 100px);-->
<!--        }-->
<!--    }-->
<!--    .el-row {-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--        margin-bottom: 20px;-->
<!--        &:last-child {-->
<!--            margin-bottom: 0;-->
<!--        }-->
<!--        .grid-content {-->
<!--            align-items: center;-->
<!--            min-height: 36px;-->
<!--        }-->

        .topInfo {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
<!--        .topInfo {-->
<!--            width: 100%;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            font-size: 16px;-->
<!--            font-weight: bold;-->

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.el-input {
    width: 100% !important;
}
.el-date-editor::v-deep {
    width: 100%;
}
.el-select {
    width: 100% !important;
}
.el-tabs{
    width: 100%;
}
::v-deep(.el-date-editor){
    width: 100%;
}
<!--            & > div {-->
<!--                white-space: nowrap;-->
<!--                margin-right: 20px;-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--}-->
<!--.el-input {-->
<!--    width: 100% !important;-->
<!--}-->
<!--.el-date-editor::v-deep {-->
<!--    width: 100%;-->
<!--}-->
<!--.el-select {-->
<!--    width: 100% !important;-->
<!--}-->
<!--.el-tabs{-->
<!--    width: 100%;-->
<!--}-->
<!--::v-deep(.el-date-editor){-->
<!--    width: 100%;-->
<!--}-->

:deep(.el-cascader){
    width: 100% !important;
}
</style>
<!--:deep(.el-cascader){-->
<!--    width: 100% !important;-->
<!--}-->
<!--</style>-->

 src/views/system/role/component/roleDialog.vue

@@ -1,23 +1,23 @@
<template>
    <div class="system-add-role-container">
        <el-dialog :title="title" v-model="isShowRoleDialog" width="769px">
        <el-dialog :title="title" v-model="isShowRoleDialog" width="600px">
            <el-form :model="roleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-col :xs="24" :sm="12" :md="12" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="角色名称">
                            <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
                            <el-input v-model="roleForm.name" placeholder="请输入角色名称" clearable></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="角色标识">
                            <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></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-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></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="角色标识">-->
<!--                            <el-input v-model="roleForm.roleCode" placeholder="请输入角色标识" clearable></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-input v-model="roleForm.roleInfo" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
            </el-form>
            <template #footer>
@@ -46,9 +46,8 @@
    buttonName: string;
    isShowRoleDialog: boolean;
    roleForm: {
        roleName: string;
        roleCode: string;
        roleInfo: string;
        name: string;
        roleId?:number;
    };
    menuData: Array<MenuDataTree>;
    menuProps: {
@@ -65,9 +64,7 @@
            title: '',
            buttonName: '',
            roleForm: {
                roleName: '', // 角色名称
                roleCode: '', // 角色标识
                roleInfo: '' // 排序
                name: '',
            },
            menuData: [],
            menuProps: {
@@ -82,21 +79,23 @@
                state.title = '新增角色';
                state.buttonName = '新增';
                state.roleForm = {
                    roleName: '',
                    roleCode: '',
                    roleInfo: ''
                    name: '',
                };
            } else {
                state.title = '修改角色';
                state.buttonName = '修改';
                state.roleForm = JSON.parse(JSON.stringify(value));
                let data = JSON.parse(JSON.stringify(value));
                state.roleForm = {
                    roleId: data.id,
                    name: data.name
                }
            }
        };
        // 新增
        const onSubmit = async () => {
            if (state.title === '新增角色') {
                let res = await useRoleApi().addRole(state.roleForm);
                if (res.data.code === '200') {
                if (res.data.code === 100) {
                    ElMessage({
                        type: 'success',
                        message: '角色新增成功',
@@ -112,7 +111,7 @@
                }
            } else {
                let res = await useRoleApi().modRole(state.roleForm);
                if (res.data.code === '200') {
                if (res.data.code === 100) {
                    ElMessage({
                        type: 'success',
                        message: '角色修改成功',

 src/views/system/role/index.vue

@@ -18,13 +18,9 @@
            </div>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleCode" label="角色标识" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleInfo" label="角色描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="角色名称" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('新增', '')">新增</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" style="color: red" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
@@ -84,7 +80,7 @@
        // 初始化表格数据
        const initRoleTableData = async () => {
            let res = await useRoleApi().getRoleList();
            if (res.data.code === '200') {
            if (res.data.code === 100) {
                state.tableData.data = res.data.data;
            } else {
                ElMessage({
@@ -106,7 +102,7 @@
            })
                .then(async () => {
                    let res = await useRoleApi().deleteRole({ roleId: row.roleId });
                    if (res.data.code === '200') {
                    if (res.data.code === 100) {
                        ElMessage({
                            type: 'success',
                            duration: 2000,

 src/views/system/user/index.vue

@@ -2,8 +2,7 @@
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.username" placeholder="请输入用户名" style="max-width: 180px"> </el-input>
                <el-input size="default" v-model.trim="userTableData.listQuery.searchParams.realName" placeholder="请输入真实姓名" style="max-width: 180px; margin-left: 10px"> </el-input>
                <el-input size="default" v-model.trim="userTableData.listQuery.roleId" placeholder="请输入用户名" style="max-width: 180px"> </el-input>
                <el-button size="default" type="primary" class="ml10" @click="initUserTableData">
                    <el-icon>
                        <ele-Search />
@@ -79,10 +78,8 @@
        total: number;
        loading: boolean;
        listQuery: {
            searchParams: {
                username: string | null;
                realName: string | null;
            };
            roleId: number | null;
            usePage: boolean;
            pageIndex: number;
            pageSize: number;
        };
@@ -102,10 +99,8 @@
                total: 0,
                loading: false,
                listQuery: {
                    searchParams: {
                        username: null,
                        realName: null
                    },
                    roleId: 1,
                    usePage: false,
                    pageIndex: 1,
                    pageSize: 10
                }
@@ -127,17 +122,6 @@
            }
        };

        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getRoleData = async () => {
            let res = await useRoleApi().getRoleList();
@@ -193,12 +177,7 @@
        };
        // 页面加载时
        onMounted(() => {
            let a = { name: 1, c: { name: 1 } };
            let b = Object.assign({}, a);
            b.c.name = 2;
            console.log(a.c.name);
            initUserTableData();
            getDepartmentData();
            getRoleData();
        });
        return {