lct

Your Name

2022-07-07 fd285d6245ddd54c2eef8237eb878f573d665f94

lct

 .env.development

@@ -2,6 +2,6 @@
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.8:8008'
VITE_API_URL = 'http://192.168.0.14:8008'

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

 .idea/codeStyles/Project.xml

对比新文件
@@ -0,0 +1,10 @@
<component name="ProjectCodeStyleConfiguration">
  <code_scheme name="Project" version="173">
    <codeStyleSettings language="TypeScript">
      <indentOptions>
        <option name="USE_TAB_CHARACTER" value="true" />
        <option name="SMART_TABS" value="true" />
      </indentOptions>
    </codeStyleSettings>
  </code_scheme>
</component>

 .idea/codeStyles/codeStyleConfig.xml

对比新文件
@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
  <state>
    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
  </state>
</component>

 .idea/prettier.xml

对比新文件
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="PrettierConfiguration">
    <option name="myRunOnSave" value="true" />
    <option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,vue}" />
  </component>
</project>

 .prettierrc.js

@@ -1,39 +1,39 @@
module.exports = {
    // 一行最多多少个字符
    printWidth: 150,
    // 指定每个缩进级别的空格数
    tabWidth: 2,
    // 使用制表符而不是空格缩进行
    useTabs: true,
    // 在语句末尾打印分号
    semi: true,
    // 使用单引号而不是双引号
    singleQuote: true,
    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    quoteProps: 'as-needed',
    // 在JSX中使用单引号而不是双引号
    jsxSingleQuote: false,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    trailingComma: 'es5',
    // 在对象文字中的括号之间打印空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    arrowParens: 'always',
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    rangeStart: 0,
    rangeEnd: Infinity,
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准 always\never\preserve
    proseWrap: 'preserve',
    // 指定HTML文件的全局空格敏感度 css\strict\ignore
    htmlWhitespaceSensitivity: 'css',
    // Vue文件脚本和样式标签缩进
    vueIndentScriptAndStyle: false,
    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
    endOfLine: 'lf',
    // 一行最多多少个字符
    printWidth: 150,
    // 指定每个缩进级别的空格数
    tabWidth: 4,
    // 使用制表符而不是空格缩进行
    useTabs: false,
    // // 在语句末尾打印分号
    // semi: true,
    // 使用单引号而不是双引号
    singleQuote: true,
    // // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    // quoteProps: 'as-needed',
    // // 在JSX中使用单引号而不是双引号
    // jsxSingleQuote: false,
    // // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    trailingComma: 'none',
    // 在对象文字中的括号之间打印空格
    // bracketSpacing: true,
    // // jsx 标签的反尖括号需要换行
    // jsxBracketSameLine: false,
    // // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    // arrowParens: 'always',
    // // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    // rangeStart: 2,
    // rangeEnd: Infinity,
    // // 指定要使用的解析器，不需要写文件开头的 @prettier
    // requirePragma: false,
    // // 不需要自动在文件开头插入 @prettier
    // insertPragma: false,
    // // 使用默认的折行标准 always\never\preserve
    // proseWrap: 'preserve',
    // // 指定HTML文件的全局空格敏感度 css\strict\ignore
    // htmlWhitespaceSensitivity: 'css',
    // // Vue文件脚本和样式标签缩进
    // vueIndentScriptAndStyle: false,
    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
    endOfLine: 'lf'
};

 src/api/department/index.ts

@@ -2,25 +2,28 @@

export function departmentApi() {
    return {
        // v1
        getDepartmentList: () => {
            return request({
                url: `/department/list`,
                method: 'post',
                method: 'post'
            });
        },
        // v1
        addDepartment: (data: object) => {
            return request({
                url: `/department/add`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modDepartment: (data: object) => {
            return request({
                url: `/department/mod`,
                method: 'post',
                data:data
                data: data
            });
        },
        }
    };
}

 src/api/doublePreventSystem/productionDevice/index.ts

@@ -1,40 +1,45 @@
import request from '/@/utils/request'
import request from '/@/utils/request';

export function productionDeviceApi() {
    return {
        // v1
        getProductionDeviceList: (data: object) => {
            return request({
                url: `/prevent/device/select/getDevicePage`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        addProductionDevice: (data: object) => {
            return request({
                url: `/prevent/device/insert/saveDevice`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modProductionDevice: (data: object) => {
            return request({
                url: `/prevent/device/update/updateDevice`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        deleteProductionDevice: (data: object) => {
            return request({
                url: `/prevent/device/delete/deleteDevice`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        getAllProductionDeviceList: () => {
            return request({
                url: `/prevent/device/select/listDevices`,
                method: 'post',
                method: 'post'
            });
        },
    }
        }
    };
}

 src/api/doublePreventSystem/riskControlMeasure/index.ts

@@ -1,34 +1,44 @@
import request from '/@/utils/request'
import request from '/@/utils/request';

export function riskControlMeasureApi() {
    return {
        // v1
        getRiskControlMeasureList: (data: object) => {
            return request({
                url: `/prevent/riskControlMeasure/select/getRiskControlMeasurePage`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        addRiskControlMeasure: (data: object) => {
            return request({
                url: `/prevent/riskControlMeasure/insert/saveRiskControlMeasure`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modRiskControlMeasure: (data: object) => {
            return request({
                url: `/prevent/riskControlMeasure/update/updateRiskControlMeasure`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        deleteRiskControlMeasure: (data: object) => {
            return request({
                url: `/prevent/riskControlMeasure/delete/deleteRiskControlMeasure`,
                method: 'post',
                data:data
                data: data
            });
        },
    }
        getClassifyData: () => {
            return request({
                url: `/prevent/riskControlMeasure/select/listMeasures`,
                method: 'post'
            });
        }
    };
}

 src/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts

@@ -1,40 +1,45 @@
import request from '/@/utils/request'
import request from '/@/utils/request';

export function safetyRiskAnalyseUnitApi() {
    return {
        // v1
        getSafetyRiskAnalyseUnitList: (data: object) => {
            return request({
                url: `/prevent/riskAnaUnit/select/getRiskUnitPage`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        addSafetyRiskAnalyseUnit: (data: object) => {
            return request({
                url: `/prevent/riskAnaUnit/insert/saveRiskAnaUnit`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modSafetyRiskAnalyseUnit: (data: object) => {
            return request({
                url: `/prevent/riskAnaUnit/update/updateRiskAnaUnit`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        deleteSafetyRiskAnalyseUnit: (data: object) => {
            return request({
                url: `/prevent/riskAnaUnit/delete/deleteRiskAnaUnit`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        getAllSafetyRiskAnalyseUnitList: () => {
            return request({
                url: `/prevent/riskEvent/select/listRiskUnits`,
                method: 'post',
                method: 'post'
            });
        },
    }
        }
    };
}

 src/api/doublePreventSystem/safetyRiskEvent/index.ts

@@ -1,34 +1,45 @@
import request from '/@/utils/request'
import request from '/@/utils/request';

export function safetyRiskEventApi() {
    return {
        // v1
        getSafetyRiskEventList: (data: object) => {
            return request({
                url: `/prevent/riskEvent/select/getRiskEventPage`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        addSafetyRiskEvent: (data: object) => {
            return request({
                url: `/prevent/riskEvent/insert/saveRiskEvent`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modSafetyRiskEvent: (data: object) => {
            return request({
                url: `/prevent/riskEvent/update/updateRiskEvent`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        deleteSafetyRiskEvent: (data: object) => {
            return request({
                url: `/prevent/riskEvent/delete/deleteRiskEvent`,
                method: 'post',
                data:data
                data: data
            });
        },
    }
        // v1
        getAllSafetyRiskEventList: () => {
            return request({
                url: `/prevent/riskEvent/select/getListEvents`,
                method: 'post'
            });
        }
    };
}

 src/api/login/index.ts

@@ -6,20 +6,22 @@
 * @method signOut 用户退出登录
 */
export function useLoginApi() {
    return {
        signIn: (params: object) => {
            return request({
                url: '/auth/login',
                method: 'post',
                data: params,
            });
        },
        signOut: (params: object) => {
            return request({
                url: '/user/signOut',
                method: 'post',
                data: params,
            });
        },
    };
    return {
        // v1
        signIn: (params: object) => {
            return request({
                url: '/auth/login',
                method: 'post',
                data: params
            });
        },
        // v1
        signOut: (params: object) => {
            return request({
                url: '/user/signOut',
                method: 'post',
                data: params
            });
        }
    };
}

 src/api/menu/index.ts

@@ -7,39 +7,44 @@
 * @method getMenuTest 获取后端动态路由菜单(test)
 */
export function useMenuApi() {
    return {
        getMenuAdmin: (value?: string) => {
            return request({
                url: `/auth/menu?projectId= ${value}`,
                method: 'post',
            });
        },
        addMenu: (value?: object) => {
            return request({
                url: `/menu/add`,
                method: 'post',
                data:value
            });
        },
        modMenu: (value?: object) => {
            return request({
                url: `/menu/mod`,
                method: 'post',
                data:value
            });
        },
        deleteMenu: (value?: object) => {
            return request({
                url: `/menu/del`,
                method: 'post',
                data:value,
            });
        },
        getProjectList: () => {
            return request({
                url: `/project/list`,
                method: 'post',
            });
        },
    };
    return {
        // v1
        getMenuAdmin: (value?: string) => {
            return request({
                url: `/auth/menu?projectId= ${value}`,
                method: 'post'
            });
        },
        // v1
        addMenu: (value?: object) => {
            return request({
                url: `/menu/add`,
                method: 'post',
                data: value
            });
        },
        // v1
        modMenu: (value?: object) => {
            return request({
                url: `/menu/mod`,
                method: 'post',
                data: value
            });
        },
        // v1
        deleteMenu: (value?: object) => {
            return request({
                url: `/menu/del`,
                method: 'post',
                data: value
            });
        },
        // v1
        getProjectList: () => {
            return request({
                url: `/project/list`,
                method: 'post'
            });
        }
    };
}

 src/api/role/index.ts

@@ -2,25 +2,28 @@

export function useRoleApi() {
    return {
        // v1
        getRoleList: () => {
            return request({
                url: `/role/list`,
                method: 'post',
                method: 'post'
            });
        },
        // v1
        addRole: (data: object) => {
            return request({
                url: `/role/add`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modRole: (data: object) => {
            return request({
                url: `/role/mod`,
                method: 'post',
                data:data
                data: data
            });
        },
        }
    };
}

 src/api/user/index.ts

@@ -2,32 +2,36 @@

export function userApi() {
    return {
        // v1
        getUserList: (data: any) => {
            return request({
                url: `/account/page/list`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        addUser: (data: object) => {
            return request({
                url: `/account/add`,
                method: 'post',
                data:data
                data: data
            });
        },
        // v1
        modUser: (data: object) => {
            return request({
                url: `/account/mod`,
                method: 'post',
                data:data
                data: data
            });
        },
        getUserLByDepartment: (depId : number | null) => {
        // v1
        getUserLByDepartment: (depId: number | null) => {
            return request({
                url: `/account/dep/list?depId=${depId}`,
                method: 'get',
                method: 'get'
            });
        },
        }
    };
}

 src/assets/style/index.scss

对比新文件
@@ -0,0 +1,7 @@
.input-box{
  width: 200px !important;
}
.basic-line{
  display: inline-block;
  padding-left: 10px;
}

 src/main.ts

@@ -5,22 +5,22 @@
import { directive } from '/@/utils/directive';
import { i18n } from '/@/i18n/index';
import other from '/@/utils/other';

import '/@/assets/style/index.scss';
import ElementPlus from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import 'element-plus/dist/index.css';
import '/@/theme/index.scss';
import mitt from 'mitt';
import VueGridLayout from 'vue-grid-layout';
import locale from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn';

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
    app.component(key, component);
}
directive(app);
other.elSvg(app);

app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t,locale }).use(i18n).use(VueGridLayout).mount('#app');
app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t, locale }).use(i18n).use(VueGridLayout).mount('#app');

app.config.globalProperties.mittBus = mitt();

 src/utils/debounce.ts

文件已删除

 src/utils/directive.ts

@@ -1,6 +1,7 @@
import type { App } from 'vue';
import { authDirective } from '/@/utils/authDirective';
import { wavesDirective, dragDirective } from '/@/utils/customDirective';
import { preventClick } from '/@/utils/throttle';

/**
 * 导出指令方法：v-xxx
@@ -9,10 +10,12 @@
 * @methods dragDirective 自定义拖动指令，用法：v-drag
 */
export function directive(app: App) {
    // 用户权限指令
    authDirective(app);
    // 按钮波浪指令
    wavesDirective(app);
    // 自定义拖动指令
    dragDirective(app);
    // 用户权限指令
    authDirective(app);
    // 按钮波浪指令
    wavesDirective(app);
    // 自定义拖动指令
    dragDirective(app);

    preventClick(app);
}

 src/utils/getStyleSheets.ts

@@ -1,101 +1,101 @@
import { nextTick } from 'vue';
import * as svg from '@element-plus/icons-vue';

// 获取阿里字体图标
const getAlicdnIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            let sheetsList = [];
            let sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
                    sheetsList.push(styles[i]);
                }
            }
            for (let i = 0; i < sheetsList.length; i++) {
                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
                    if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
                        sheetsIconList.push(
                            `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
                        );
                    }
                }
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList);
            else reject('未获取到值，请刷新重试');
        });
    });
};

// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
const getElementPlusIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const icons = svg as any;
            const sheetsIconList = [];
            for (const i in icons) {
                sheetsIconList.push(`ele-${icons[i].name}`);
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList);
            else reject('未获取到值，请刷新重试');
        });
    });
};

// 初始化获取 css 样式，这里使用 fontawesome 的图标
const getAwesomeIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            let sheetsList = [];
            let sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
                    sheetsList.push(styles[i]);
                }
            }
            for (let i = 0; i < sheetsList.length; i++) {
                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
                    if (
                        sheetsList[i].cssRules[j].selectorText &&
                        sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
                        sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
                    ) {
                        if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
                            sheetsIconList.push(
                                `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
                            );
                        }
                    }
                }
            }
            if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
            else reject('未获取到值，请刷新重试');
        });
    });
};

/**
 * 获取字体图标 `document.styleSheets`
 * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
 * @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
 * @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
 */
const initIconfont = {
    // iconfont
    ali: () => {
        return getAlicdnIconfont();
    },
    // element plus
    ele: () => {
        return getElementPlusIconfont();
    },
    // fontawesome
    awe: () => {
        return getAwesomeIconfont();
    },
};

// 导出方法
export default initIconfont;
// import { nextTick } from 'vue';
// import * as svg from '@element-plus/icons-vue';
//
// // 获取阿里字体图标
// const getAlicdnIconfont = () => {
//     return new Promise((resolve, reject) => {
//         nextTick(() => {
//             const styles: any = document.styleSheets;
//             let sheetsList = [];
//             let sheetsIconList = [];
//             for (let i = 0; i < styles.length; i++) {
//                 if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
//                     sheetsList.push(styles[i]);
//                 }
//             }
//             for (let i = 0; i < sheetsList.length; i++) {
//                 for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
//                     if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
//                         sheetsIconList.push(
//                             `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
//                         );
//                     }
//                 }
//             }
//             if (sheetsIconList.length > 0) resolve(sheetsIconList);
//             else reject('未获取到值，请刷新重试');
//         });
//     });
// };
//
// // 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
// const getElementPlusIconfont = () => {
//     return new Promise((resolve, reject) => {
//         nextTick(() => {
//             const icons = svg as any;
//             const sheetsIconList = [];
//             for (const i in icons) {
//                 sheetsIconList.push(`ele-${icons[i].name}`);
//             }
//             if (sheetsIconList.length > 0) resolve(sheetsIconList);
//             else reject('未获取到值，请刷新重试');
//         });
//     });
// };
//
// // 初始化获取 css 样式，这里使用 fontawesome 的图标
// const getAwesomeIconfont = () => {
//     return new Promise((resolve, reject) => {
//         nextTick(() => {
//             const styles: any = document.styleSheets;
//             let sheetsList = [];
//             let sheetsIconList = [];
//             for (let i = 0; i < styles.length; i++) {
//                 if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
//                     sheetsList.push(styles[i]);
//                 }
//             }
//             for (let i = 0; i < sheetsList.length; i++) {
//                 for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
//                     if (
//                         sheetsList[i].cssRules[j].selectorText &&
//                         sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
//                         sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
//                     ) {
//                         if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
//                             sheetsIconList.push(
//                                 `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
//                             );
//                         }
//                     }
//                 }
//             }
//             if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
//             else reject('未获取到值，请刷新重试');
//         });
//     });
// };
//
// /**
//  * 获取字体图标 `document.styleSheets`
//  * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
//  * @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
//  * @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
//  */
// const initIconfont = {
//     // iconfont
//     ali: () => {
//         return getAlicdnIconfont();
//     },
//     // element plus
//     ele: () => {
//         return getElementPlusIconfont();
//     },
//     // fontawesome
//     awe: () => {
//         return getAwesomeIconfont();
//     },
// };
//
// // 导出方法
// export default initIconfont;

 src/utils/request.ts

@@ -1,94 +1,88 @@
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import JSONbig from 'json-bigint'
import JSONbig from 'json-bigint';

// var jsonBig = require('json-bigint')({ "storeAsString": true });
// 配置新建一个 axios 实例
const service = axios.create({
    baseURL: import.meta.env.VITE_API_URL as any,
    timeout: 50000,
    headers: { 'Content-Type': 'application/json' },
    baseURL: import.meta.env.VITE_API_URL as any,
    timeout: 50000,
    headers: { 'Content-Type': 'application/json' }
});

service.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么 token
        if (Session.get('token')) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            (<any>config.headers).common['Authorization'] = `${Session.get('token')}`;
            (<any>config.headers).common['uid'] = `${Session.get('uid')}`;
        }
        return config;
    },
    (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
    (config) => {
        // 在发送请求之前做些什么 token
        if (Session.get('token')) {
            (<any>config.headers).common['Authorization'] = `${Session.get('token')}`;
            (<any>config.headers).common['uid'] = `${Session.get('uid')}`;
        }
        return config;
    },
    (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

service.defaults.transformResponse = [
    function(data) {

    function (data) {
        try {
            // 正常同通过return JSON.parse(data)对数据进行转换
            // 但是转化完成的数据可能超出安全数据长度
            // 因此我们定制使用第三包来转化
            return JSONbig.parse(data)
            return JSONbig.parse(data);
        } catch (err) {
            console.log(err);
            // 转换失败返回一个空对象
            return {}
            return {};
        }
    }
]
];

service.interceptors.response.use(

    (response) => {
        // 对响应数据做点什么
        if(response.data.code && (response.data.code ==='A0215' || response.data.code === 'A0214' || response.data.code === 'A0213')){
            Session.clear()
            window.location.href = '/'
            return Promise.reject(response)
        }
        // if(response.data.code && response.data.code !== '200'){		
            return Promise.resolve(response)
        // }
        // Session.clear()
        // window.location.href = '/'
        // return Promise.reject(response)
        // const res = response.data;
        // debugger
        // if (res.code && res.code !== 0) {
        //     // `token` 过期或者账号已在别处登录
        //     if (res.code === 401 || res.code === 4001) {
        //         Session.clear(); // 清除浏览器全部临时缓存
        //         window.location.href = '/'; // 去登录页
        //         ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
        //             .then(() => {})
        //             .catch(() => {});
        // }
        //     return Promise.reject(service.interceptors.response);
        // } else {
        //     return response.data;
        // }
    },
    (error) => {
        // 对响应错误做点什么
        if (error.message.indexOf('timeout') != -1) {
            ElMessage.error('网络超时');
        } else if (error.message == 'Network Error') {
            ElMessage.error('网络连接错误');
        } else {
            if (error.response.data) ElMessage.error(error.response.statusText);
            else ElMessage.error('接口路径找不到');
        }
        return Promise.reject(error);
    }
    (response) => {
        // 对响应数据做点什么
        if (response.data.code && (response.data.code === 'A0215' || response.data.code === 'A0214' || response.data.code === 'A0213')) {
            Session.clear();
            window.location.href = '/';
            return Promise.reject(response);
        }
        // if(response.data.code && response.data.code !== '200'){
        return Promise.resolve(response);
        // }
        // Session.clear()
        // window.location.href = '/'
        // return Promise.reject(response)
        // const res = response.data;
        // debugger
        // if (res.code && res.code !== 0) {
        //     // `token` 过期或者账号已在别处登录
        //     if (res.code === 401 || res.code === 4001) {
        //         Session.clear(); // 清除浏览器全部临时缓存
        //         window.location.href = '/'; // 去登录页
        //         ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
        //             .then(() => {})
        //             .catch(() => {});
        // }
        //     return Promise.reject(service.interceptors.response);
        // } else {
        //     return response.data;
        // }
    },
    (error) => {
        // 对响应错误做点什么
        if (error.message.indexOf('timeout') != -1) {
            ElMessage.error('网络超时');
        } else if (error.message == 'Network Error') {
            ElMessage.error('网络连接错误');
        } else {
            if (error.response.data) ElMessage.error(error.response.statusText);
            else ElMessage.error('接口路径找不到');
        }
        return Promise.reject(error);
    }
);

export default service;

 src/utils/throttle.ts

对比新文件
@@ -0,0 +1,36 @@
import { App } from 'vue';

export function preventClick(app: App) {
    app.directive('throttle', {
        mounted(el: any, binding: any) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true;
                    setTimeout(() => {
                        el.disabled = false;
                    }, binding.value || 2000);
                }
            });
        }

        // mounted(el, binding) {
        //     let timer : NodeJS.Timeout | null = null
        //     el.addEventListener('click', () => {
        //         debugger
        //         let firstClick: Boolean = !timer;
        //         if(firstClick){
        //             binding.value
        //         }
        //         if(timer){
        //             clearTimeout(timer)
        //         }
        //         timer = setTimeout(() => {
        //             timer = null
        //             if(!firstClick){
        //                 binding.value
        //             }
        //         },3000);
        //     })
        // }
    });
}

 src/views/doublePreventSystem/riskLevelManage/productionDevice/components/productionDeviceDialog.vue

@@ -1,189 +1,200 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowProductionDeviceDialog" width="600px">
            <el-form :model="productionDeviceForm" :rules="productionDeviceFormRules" ref="productionDeviceFormRef" size="default" label-width="120px">
            <el-form
                :model="productionDeviceForm"
                :rules="productionDeviceFormRules"
                ref="productionDeviceFormRef"
                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="produceDeviceName">
                            <el-input class="input-length" v-model="productionDeviceForm.produceDeviceName" placeholder="请输入生产装置名称" clearable></el-input>
                            <el-input
                                class="input-length"
                                v-model="productionDeviceForm.produceDeviceName"
                                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="depId">
                            <el-cascader
                                    :options="departmentList"
                                    :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                    placeholder="请选择部门"
                                    clearable
                                    filterable
                                    style="width:85%"
                                    v-model="productionDeviceForm.depId"
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width: 85%"
                                v-model="productionDeviceForm.depId"
                            >
                            </el-cascader>
<!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></el-select>-->
                            <!--                            <el-select class="input-length" v-model="productionDeviceForm.depName" placeholder="请选择所属部门" clearable filterable></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" v-model="productionDeviceForm.riskLevel" placeholder="请选择风险等级" clearable filterable>
                                <el-option
                                v-for="item in levelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                ></el-option>
                            <el-select
                                class="input-length"
                                v-model="productionDeviceForm.riskLevel"
                                placeholder="请选择风险等级"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in levelList" :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="location">
                            <el-input class="input-length" v-model="productionDeviceForm.location" type="textarea" placeholder="请输入区域位置" maxlength="150"></el-input>
                            <el-input
                                class="input-length"
                                v-model="productionDeviceForm.location"
                                type="textarea"
                                placeholder="请输入区域位置"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" size="default">确 实</el-button>
                </span>
                <span class="dialog-footer">
                    <el-button @click="isShowProductionDeviceDialog = !isShowProductionDeviceDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitProductionDevice" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    interface stateType{
        isShowProductionDeviceDialog:Boolean,
        productionDeviceForm:{
            produceDeviceName: string,
            depId: number | null,
            riskLevel: number | null,
            location: string,
        },
        title: string,
        departmentList: [],
        levelList: Array<levelListState>,
        productionDeviceFormRules:{}
    }
    interface levelListState {
interface stateType {
    isShowProductionDeviceDialog: Boolean;
    productionDeviceForm: {
        produceDeviceName: string;
        depId: number | null;
        riskLevel: number | null;
        location: string;
    };
    title: string;
    departmentList: [];
    levelList: Array<levelListState>;
    productionDeviceFormRules: {};
}
interface levelListState {}
import { reactive, toRefs, ref } from 'vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const productionDeviceFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            isShowProductionDeviceDialog: false,
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ],
            productionDeviceForm: {
                produceDeviceName: '',
                depId: null,
                riskLevel: null,
                location: ''
            },
            productionDeviceFormRules: {
                produceDeviceName: [{ required: true, message: '请填写生产装置名称', trigger: 'blur' }],
                depId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
                location: [{ required: true, message: '请填写区域位置', trigger: 'blur' }]
            }
        });

    }
    import { reactive, toRefs, ref} from 'vue'
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
    import { ElMessage } from 'element-plus';
    export default {
        name: "productionDeviceDialog",
        setup(props, context) {
            const productionDeviceFormRef = ref();
            const state = reactive<stateType>({
                title:'',
                departmentList: [],
                isShowProductionDeviceDialog: false,
                levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},],
                productionDeviceForm: {
        //打开模态框
        const openProductionDeviceDialog = (type: string, value: object, department: []) => {
            state.isShowProductionDeviceDialog = true;
            state.departmentList = department;
            setTimeout(() => {
                productionDeviceFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增生产装置';
                state.productionDeviceForm = {
                    produceDeviceName: '',
                    depId: null,
                    riskLevel: null,
                    location: '',
                },
                productionDeviceFormRules:{
                    produceDeviceName: [
                        { required: true, message: '请填写生产装置名称', trigger: 'blur' },
                    ],
                    depId: [
                        { required: true, message: '请选择部门', trigger: 'change' },
                    ],
                    riskLevel: [
                        { required: true, message: '请选择风险等级', trigger: 'change' },
                    ],
                    location: [
                        { required: true, message: '请填写区域位置', trigger: 'blur' },
                    ],
                }
                    location: ''
                };
            } else {
                state.title = '修改生产装置';
                state.productionDeviceForm = JSON.parse(JSON.stringify(value));
            }
        };

            });

            //打开模态框
            const openProductionDeviceDialog = (type: string, value: object, department: []) => {
                state.isShowProductionDeviceDialog = true;
                state.departmentList = department;
                setTimeout(() => {
                    productionDeviceFormRef.value.clearValidate()
                })
                if(type === '新增'){
                    state.title = '新增生产装置';
                    state.productionDeviceForm = {
                        produceDeviceName: '',
                        depId: null,
                        riskLevel: null,
                        location: '',
                    };
                }else{
                    state.title = '修改生产装置';
                    state.productionDeviceForm = JSON.parse(JSON.stringify(value));
                }
            };

            //新增修改提交
            const submitProductionDevice = async () => {
                productionDeviceFormRef.value.validate( async (valid: Boolean) => {
                    if(valid){
                        if(state.title === '新增生产装置'){
                            let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置新增成功',
                                duration:2000
                                });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        }else{
                            let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置修改成功',
                                duration:2000
        //新增修改提交
        const submitProductionDevice = async () => {
            productionDeviceFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增生产装置') {
                        let res = await productionDeviceApi().addProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置新增成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }else{
                        ElMessage({
                            type:'warning',
                            message:'请完善基本信息',
                        });
                    } else {
                        let res = await productionDeviceApi().modProductionDevice(state.productionDeviceForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '生产装置修改成功',
                                duration: 2000
                            });
                            state.isShowProductionDeviceDialog = false;
                            context.emit('refreshProductionDevice');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                })
       
            }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

            return{
                ...toRefs(state),
                productionDeviceFormRef,
                submitProductionDevice,
                openProductionDeviceDialog,
            };
        }
        return {
            ...toRefs(state),
            productionDeviceFormRef,
            submitProductionDevice,
            openProductionDeviceDialog
        };
    }
};
</script>

<style scoped>
.input-length{
    width:85%;
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevelManage/productionDevice/index.vue

@@ -2,36 +2,32 @@
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-search">
                <div class="basic-line">
                    <span>风险等级：</span>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="ml10" placeholder="请选择风险等级">
                        <el-option
                        v-for="item in levelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    <el-select v-model="productionDeviceData.params.riskLevel" clearable filterable class="input-box" placeholder="请选择风险等级">
                        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-search">
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader
                            :options="departmentList"
                            :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                            placeholder="请选择部门"
                            clearable
                            filterable
                            v-model="productionDeviceData.params.depId"
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="请选择部门"
                        clearable
                        filterable
                        class="input-box"
                        v-model="productionDeviceData.params.depId"
                    >
                    </el-cascader>
                </div>
                <el-button size="default" type="primary" class="ml10" @click="handleSearch">
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
@@ -44,191 +40,187 @@
                <el-table-column prop="depName" label="所属部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="区域位置" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip>
                    
                </el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
            >
            </el-pagination>
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="productionDeviceData.params.pageIndex"
                background
                v-model:page-size="productionDeviceData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="productionDeviceData.total"
            >
            </el-pagination>
        </el-card>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice ="initProductionDeviceTableData"/>
        <productionDeviceDialog ref="productionDeviceDialogRef" @refreshProductionDevice="initProductionDeviceTableData" />
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import productionDeviceDialog from './components/productionDeviceDialog.vue';
    import {productionDeviceApi} from "/@/api/doublePreventSystem/productionDevice/index.ts";
    import { departmentApi } from '/@/api/department';
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import productionDeviceDialog from './components/productionDeviceDialog.vue';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
import { departmentApi } from '/@/api/department';

    // 定义接口来定义对象的类型
    interface TableData {
        roleName: string;
        roleSign: string;
        describe: string;
        sort: number;
        status: boolean;
        createTime: string;
    }
    interface TableDataState {
        productionDeviceData: {
            data: Array<TableData>;
            total: number;
            loading: boolean;
            params: {
                pageIndex: number;
                pageSize: number;
                riskLevel: number | null;
                status: number;
                depId: number | null;
                location: string | null;
                produceDeviceName: string | null;
            };
// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    productionDeviceData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskLevel: number | null;
            status: number;
            depId: number | null;
            location: string | null;
            produceDeviceName: string | null;
        };
        departmentList:Array<DepartmentState>;
        levelList:Array<levelListState>;
    }
    interface levelListState {
    };
    departmentList: Array<DepartmentState>;
    levelList: Array<levelListState>;
}
interface levelListState {}
interface DepartmentState {}

    }
    interface DepartmentState {

    }

    export default defineComponent({
        name: 'productionDevice',
        components: { productionDeviceDialog },
        setup() {
            const productionDeviceDialogRef = ref();
            const state = reactive<TableDataState>({
                productionDeviceData: {
                    data: [],
                    total: 0,
                    loading: false,
                    params: {
                        pageIndex: 1,
                        pageSize: 10,
                        riskLevel: null,
                        status: 1,
                        depId: null,
                        location: null,
                        produceDeviceName: null
                    },
                },
                departmentList:[],
                levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},]
            });
            // 初始化表格数据
            const initProductionDeviceTableData = async () => {
                let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params)
                if(res.data.code === '200'){
                    state.productionDeviceData.data = res.data.data;
                    state.productionDeviceData.total = res.data.count;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
export default defineComponent({
    name: 'productionDevice',
    components: { productionDeviceDialog },
    setup() {
        const productionDeviceDialogRef = ref();
        const state = reactive<TableDataState>({
            productionDeviceData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskLevel: null,
                    status: 1,
                    depId: null,
                    location: null,
                    produceDeviceName: null
                }
            };

            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 onOpenDialogRef = (type: string, value: any) => {
                productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
            };
            // 删除角色
            const onDelProductionDevice = (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.produceDeviceName}”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
            },
            departmentList: [],
            levelList: [
                { id: 1, name: '低风险' },
                { id: 2, name: '一般风险' },
                { id: 3, name: '较大风险' },
                { id: 4, name: '重大风险' }
            ]
        });
        // 初始化表格数据
        const initProductionDeviceTableData = async () => {
            let res = await productionDeviceApi().getProductionDeviceList(state.productionDeviceData.params);
            if (res.data.code === '200') {
                state.productionDeviceData.data = res.data.data;
                state.productionDeviceData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                }).then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({id:row.id})
                    if(res.data.code ==='200'){
                        ElMessage({
                            type:'success',
                            duration:2000,
                            message:'删除成功'
                        })
                    await initProductionDeviceTableData()
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }).catch(() => {});
            };
            const handleSearch = () => {
                initProductionDeviceTableData()
                    message: res.data.msg
                });
            }
            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.productionDeviceData.params.pageSize = val;
                initProductionDeviceTableData()
            };
            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.productionDeviceData.params.pageIndex = val;
                initProductionDeviceTableData()
            };
            // 页面加载时
            onMounted(() => {
                initProductionDeviceTableData();
                getDepartmentData();
            });
            return {
                handleSearch,
                onOpenDialogRef,
                onHandleSizeChange,
                onDelProductionDevice,
                onHandleCurrentChange,
                productionDeviceDialog,
                productionDeviceDialogRef,
                initProductionDeviceTableData,
                ...toRefs(state),
            };
        },
    });
        };

        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 onOpenDialogRef = (type: string, value: any) => {
            productionDeviceDialogRef.value.openProductionDeviceDialog(type, value, state.departmentList);
        };
        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条生产装置：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await productionDeviceApi().deleteProductionDevice({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initProductionDeviceTableData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        const handleSearch = () => {
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.productionDeviceData.params.pageSize = val;
            initProductionDeviceTableData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.productionDeviceData.params.pageIndex = val;
            initProductionDeviceTableData();
        };
        // 页面加载时
        onMounted(() => {
            initProductionDeviceTableData();
            getDepartmentData();
        });
        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            productionDeviceDialog,
            productionDeviceDialogRef,
            initProductionDeviceTableData,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped>
.basic-search{
    display:inline-block;
    padding-left: 10px;
}
</style>
<style scoped></style>

 src/views/doublePreventSystem/riskLevelManage/riskControlMeasure/components/riskControlMeasureDialog.vue

@@ -1,198 +1,264 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isRiskControlMeasureDialog" width="600px">
            <el-form :model="riskControlMeasureForm" :rules="riskControlMeasureFormRules" ref="riskControlMeasureFormRef" size="default" label-width="160px">
            <el-form
                :model="riskControlMeasureForm"
                :rules="riskControlMeasureFormRules"
                ref="riskControlMeasureFormRef"
                size="default"
                label-width="160px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input class="input-length" v-model="riskControlMeasureForm.riskCode" 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="riskUnitName">
                            <el-input class="input-length" v-model="riskControlMeasureForm.riskUnitName" 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="produceDeviceId">
                            <el-input class="input-length" v-model="riskControlMeasureForm.produceDeviceId" 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="liableDepId">
                            <el-cascader
                                    :options="departmentList"
                                    :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                    placeholder="请选择部门"
                                    clearable
                                    filterable
                                    style="width:85%"
                                    v-model="riskControlMeasureForm.liableDepId"
                            >
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任人" prop="liablePersonId">
                            <el-select class="input-length" v-model="riskControlMeasureForm.liablePersonId" placeholder="请选择风险等级" clearable filterable>
                        <el-form-item label="风险事件名称" prop="riskEventId">
                            <el-select class="input-length" v-model="riskControlMeasureForm.riskEventId" placeholder="请选择风险事件" clearable>
                                <el-option
                                v-for="item in levelList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskEventName"
                                    :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="controlMeasureCode">
                            <el-input
                                class="input-length"
                                v-model="riskControlMeasureForm.controlMeasureCode"
                                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="controlType">
                            <el-select class="input-length" v-model="riskControlMeasureForm.controlType" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in controlTypeList" :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="checkContent">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model="riskControlMeasureForm.checkContent"
                                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="管控措施分类1" prop="classify1">
                            <el-select
                                class="input-length"
                                v-model="riskControlMeasureForm.classify1"
                                @change="changeClassifyTwoList"
                                placeholder="请选择管控方式"
                                clearable
                            >
                                <el-option v-for="item in classifyOneList" :key="item.id" :label="item.riskMeasureName" :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="管控措施分类2" prop="classify2">
                            <el-select class="input-length" v-model="riskControlMeasureForm.classify2" placeholder="请选择管控方式" clearable>
                                <el-option v-for="item in classifyTwoList" :key="item.id" :label="item.riskMeasureName" :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="管控措施分类3" prop="classify3">
                            <el-input class="input-length" v-model="riskControlMeasureForm.classify3" 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="measureDesc">
                            <el-input
                                class="input-length"
                                type="textarea"
                                :rows="3"
                                v-model="riskControlMeasureForm.measureDesc"
                                placeholder="请输入措施说明"
                                clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isRiskControlMeasureDialog = !isRiskControlMeasureDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRiskControlMeasureDialog" size="default">确 实</el-button>
                </span>
                <span class="dialog-footer">
                    <el-button @click="isRiskControlMeasureDialog = !isRiskControlMeasureDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRiskControlMeasureDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    interface stateType{
        isRiskControlMeasureDialog:Boolean,
        riskControlMeasureForm:{
            riskCode: string | null,
            riskUnitName: string | null,
            liablePersonId: number | null,
            liableDepId: number | null,
            produceDeviceId: number | null,
        },
        title: string,
        departmentList: [],
        levelList: Array<levelListState>,
        riskControlMeasureFormRules:{}
    }
    interface levelListState {
interface stateType {
    isRiskControlMeasureDialog: Boolean;
    riskControlMeasureForm: {
        riskEventId: number | null;
        controlMeasureCode: string | null;
        controlType: number | null;
        checkContent: string | null;
        classify1: number | null;
        classify2: number | null;
        classify3: string | null;
        measureDesc: string | null;
    };
    title: string;
    controlTypeList: Array<controlTypeListType>;
    classifyOneList: [];
    classifyTwoList: Array<classifyTwoType>;
    classifyTwoListAll: [];
    allSafetyRiskEventData: [];
    riskControlMeasureFormRules: {};
}
interface classifyTwoType {
    id: number;
    riskMeasureName: string;
}
interface controlTypeListType {}

    }
    import { reactive, toRefs, ref} from 'vue'
    import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure';
    import { ElMessage } from 'element-plus';
    export default {
        name: "riskControlMeasureDialog",
        setup(props, context) {
            const riskControlMeasureFormRef = ref();
            const state = reactive<stateType>({
                title:'',
                departmentList: [],
                isRiskControlMeasureDialog: false,
                levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},],
                riskControlMeasureForm: {
                    riskCode: null,
                    riskUnitName: null,
                    liablePersonId: null,
                    liableDepId: null,
                    produceDeviceId: null,
                },
                riskControlMeasureFormRules:{
                    riskCode: [
                        { required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' },
                    ],
                    riskUnitName: [
                        { required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' },
                    ],
                    liableDepId: [
                        { required: true, message: '请选择责任部门', trigger: 'change' },
                    ],
                    liablePersonId: [
                        { required: true, message: '请选择责任人', trigger: 'change' },
                    ],
                    produceDeviceId: [
                        { required: true, message: '请选择生产装置', trigger: 'change' },
                    ],
                }
import { reactive, toRefs, ref } from 'vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure';
import { ElMessage } from 'element-plus';
export default {
    name: 'riskControlMeasureDialog',
    setup(props: any, context: any) {
        const riskControlMeasureFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            classifyTwoListAll: [],
            allSafetyRiskEventData: [],
            isRiskControlMeasureDialog: false,
            riskControlMeasureForm: {
                riskEventId: null,
                controlMeasureCode: null,
                controlType: null,
                checkContent: null,
                classify1: null,
                classify2: null,
                classify3: null,
                measureDesc: null
            },
            riskControlMeasureFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, allSafetyRiskEventData: [], classifyOneList: [], classifyTwoList: []) => {
            state.isRiskControlMeasureDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.classifyOneList = JSON.parse(JSON.stringify(classifyOneList));
            state.classifyTwoListAll = JSON.parse(JSON.stringify(classifyTwoList));
            state.classifyTwoList = [];
            setTimeout(() => {
                riskControlMeasureFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险管控措施';
                state.riskControlMeasureForm = {
                    riskEventId: null,
                    controlMeasureCode: null,
                    controlType: null,
                    checkContent: null,
                    classify1: null,
                    classify2: null,
                    classify3: null,
                    measureDesc: null
                };
            } else {
                state.title = '修改风险管控措施';
                state.riskControlMeasureForm = JSON.parse(JSON.stringify(value));
            }
        };

            //打开模态框
            const openSafetyRiskEventDialog = (type: string, value: object, department: []) => {
                state.isRiskControlMeasureDialog = true;
                state.departmentList = department;
                setTimeout(() => {
                    riskControlMeasureFormRef.value.clearValidate()
                })
                if(type === '新增'){
                    state.title = '新增生产装置';
                    state.riskControlMeasureForm = {
                        riskCode: null,
                        riskUnitName: null,
                        liablePersonId: null,
                        liableDepId: null,
                        produceDeviceId: null,
                    };
                }else{
                    state.title = '修改生产装置';
                    state.riskControlMeasureForm = JSON.parse(JSON.stringify(value));
                }
            };
        const changeClassifyTwoList = () => {
            debugger;
            state.riskControlMeasureForm.classify2 = null;
            state.classifyTwoList = [];
            state.classifyTwoList = state.classifyTwoListAll.filter((item: any) => item.parentId === state.riskControlMeasureForm.classify1);
        };

            //新增修改提交
            const submitRiskControlMeasureDialog = async () => {
                riskControlMeasureFormRef.value.validate( async (valid: Boolean) => {
                    if(valid){
                        if(state.title === '新增生产装置'){
                            let res = await riskControlMeasureApi().addRiskControlMeasure(state.riskControlMeasureForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置新增成功',
                                duration:2000
                                });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        }else{
                            let res = await riskControlMeasureApi().modRiskControlMeasure(state.riskControlMeasureForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置修改成功',
                                duration:2000
        //新增修改提交
        const submitRiskControlMeasureDialog = async () => {
            riskControlMeasureFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险管控措施') {
                        let res = await riskControlMeasureApi().addRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施新增成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }else{
                        ElMessage({
                            type:'warning',
                            message:'请完善基本信息',
                        });
                    } else {
                        let res = await riskControlMeasureApi().modRiskControlMeasure(state.riskControlMeasureForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险管控措施修改成功',
                                duration: 2000
                            });
                            state.isRiskControlMeasureDialog = false;
                            context.emit('refreshRiskControlMeasure');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

            return{
                ...toRefs(state),
               riskControlMeasureFormRef,
                submitRiskControlMeasureDialog,
                openSafetyRiskEventDialog,
            };
        }
        return {
            ...toRefs(state),
            riskControlMeasureFormRef,
            changeClassifyTwoList,
            submitRiskControlMeasureDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length{
    width:85%;
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevelManage/riskControlMeasure/index.vue

@@ -2,235 +2,270 @@
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-search">
                    <span>风险等级：</span>
                    <el-select v-model="riskControlMeasureData.params.riskLevel" clearable filterable class="ml10" placeholder="请选择风险等级">
                        <el-option
                        v-for="item in levelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                <div class="basic-line">
                    <span>管控方式：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.controlType" placeholder="管控方式" clearable>
                        <el-option v-for="item in controlTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-search">
                    <span>部门：</span>
                    <el-cascader
                            :options="departmentList"
                            :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                            placeholder="请选择部门"
                            clearable
                            filterable
                            v-model="riskControlMeasureData.params.depId"
                    >
                    </el-cascader>
                <div class="basic-line">
                    <span>安全风险事件：</span>
                    <el-select class="input-box" v-model="riskControlMeasureData.params.riskEventId" placeholder="安全风险事件" clearable>
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskEventName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <el-button size="default" type="primary" class="ml10" @click="handleSearch">
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增单元
                    新增措施
                </el-button>
            </div>
            <el-table :data="riskControlMeasureData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column prop="produceDeviceName" label="生产装置名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskCode" label="安全风险分析对象编码" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="location" label="责任部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="责任人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskEventName" label="安全风险事件名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlMeasureCode" label="风控措施编码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="controlType" label="管控方式" show-overflow-tooltip></el-table-column>
                <el-table-column prop="checkContent" label="管控内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify1" label="管控措施分类1" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify2" label="管控措施分类2" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classify3" label="管控措施分类3" show-overflow-tooltip></el-table-column>
                <el-table-column prop="measureDesc" label="措施说明" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dateFormat('YYYY-mm-dd HH:MM:SS', '2022-07-07T08:00:00') }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelRiskControlMeasure(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="riskControlMeasureData.params.pageIndex"
                background
                v-model:page-size="riskControlMeasureData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="riskControlMeasureData.total"
            >
            </el-pagination>
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="riskControlMeasureData.params.pageIndex"
                background
                v-model:page-size="riskControlMeasureData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="riskControlMeasureData.total"
            >
            </el-pagination>
        </el-card>
        <riskControlMeasureDialog ref="riskControlMeasureDialogRef" @refreshRiskControlMeasure ="initRiskControlMeasureData"/>
        <riskControlMeasureDialog ref="riskControlMeasureDialogRef" @refreshRiskControlMeasure="initRiskControlMeasureData" />
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import riskControlMeasureDialog from './components/riskControlMeasureDialog.vue';
    import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts';
    import { departmentApi } from '/@/api/department';
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import riskControlMeasureDialog from './components/riskControlMeasureDialog.vue';
import { riskControlMeasureApi } from '/@/api/doublePreventSystem/riskControlMeasure/index.ts';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';

    // 定义接口来定义对象的类型
    interface TableData {
        roleName: string;
        roleSign: string;
        describe: string;
        sort: number;
        status: boolean;
        createTime: string;
    }
    interface TableDataState {
        riskControlMeasureData: {
            data: Array<TableData>;
            total: number;
            loading: boolean;
            params: {
                pageIndex: number;
                pageSize: number;
                riskUnitName: string | null;
                liableDep: number | null;
                liablePerson: number | null;
            };
// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    riskControlMeasureData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            controlType: number | null;
            riskEventId: number | null;
        };
        departmentList:Array<DepartmentState>;
        levelList:Array<levelListState>;
    }
    interface levelListState {
    };
    controlTypeList: Array<controlTypeType>;
    classifyOneList: Array<classifyOneType>;
    classifyTwoList: Array<classifyTwoType>;
    allSafetyRiskEventData: Array<SafetyRiskEventDataState>;
}
interface controlTypeType {}
interface classifyOneType {}
interface classifyTwoType {}
interface SafetyRiskEventDataState {}

    }
    interface DepartmentState {

    }

    export default ({
        name: 'riskControlMeasure',
        components: { riskControlMeasureDialog },
        setup() {
            const riskControlMeasureDialogRef = ref();
            const state = reactive<TableDataState>({
                riskControlMeasureData: {
                    data: [],
                    total: 0,
                    loading: false,
                    params: {
                        pageIndex: 1,
                        pageSize: 10,
                        riskUnitName: null,
                        liableDep: null,
                        liablePerson: null,
                    },
                },
                departmentList:[],
                levelList:[{id:1,name:'低风险'},{id:2,name:'一般风险'},{id:3,name:'较大风险'},{id:4,name:'重大风险'},]
            });

            // 初始化表格数据
            const initRiskControlMeasureData = async () => {
                let res = await riskControlMeasureApi().getRiskControlMeasureList(state.riskControlMeasureData.params)
                if(res.data.code === '200'){
                    state.riskControlMeasureData.data = res.data.data;
                    state.riskControlMeasureData.total = res.data.count;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
export default {
    name: 'riskControlMeasure',
    components: { riskControlMeasureDialog },
    setup() {
        const riskControlMeasureDialogRef = ref();
        const state = reactive<TableDataState>({
            riskControlMeasureData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    controlType: null,
                    riskEventId: null
                }
            };
            },
            controlTypeList: [
                { id: 1, name: '自动化监控' },
                { id: 2, name: '隐患排查' }
            ],
            classifyOneList: [],
            classifyTwoList: [],
            allSafetyRiskEventData: []
        });

            //获取部门列表
            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 onOpenDialogRef = (type: string, value: any) => {
                riskControlMeasureDialogRef.value.openSafetyRiskEventDialog(type, value, state.departmentList);
            };
            
            // 删除角色
            const onDelRiskControlMeasure = (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.produceDeviceName}”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
        // 初始化表格数据
        const initRiskControlMeasureData = async () => {
            let res = await riskControlMeasureApi().getRiskControlMeasureList(state.riskControlMeasureData.params);
            if (res.data.code === '200') {
                state.riskControlMeasureData.data = res.data.data;
                state.riskControlMeasureData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                }).then(async () => {
                    let res = await riskControlMeasureApi().deleteRiskControlMeasure({id:row.id})
                    if(res.data.code ==='200'){
                        ElMessage({
                            type:'success',
                            duration:2000,
                            message:'删除成功'
                        })
                    await initRiskControlMeasureData()
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }).catch(() => {});
            };

            const handleSearch = () => {
                initRiskControlMeasureData()
                    message: res.data.msg
                });
            }
        };

            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.riskControlMeasureData.params.pageSize = val;
                initRiskControlMeasureData()
            };
        const dateFormat = (fmt: any, date: any) => {
            date = new Date(date);
            fmt =
                date.getFullYear() +
                '-' +
                (date.getMonth() + 1) +
                '-' +
                date.getDate() +
                ' ' +
                date.getHours().toString() +
                ':' +
                (date.getMinutes().toString() === '0' ? '00' : date.getMinutes().toString()) +
                ':' +
                (date.getSeconds().toString() === '0' ? '00' : date.getMinutes().toString());
            return fmt;
        };

            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.riskControlMeasureData.params.pageIndex = val;
                initRiskControlMeasureData()
            };
        //获取安全风险事件
        const getAllSafetyRiskEvent = async () => {
            let res = await safetyRiskEventApi().getAllSafetyRiskEventList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

            // 页面加载时
            onMounted(() => {
                initRiskControlMeasureData();
                getDepartmentData();
            });
        //获取管控措施分类
        const getClassify = async () => {
            let res = await riskControlMeasureApi().getClassifyData();
            if (res.data.code === '200') {
                state.classifyOneList = res.data.data.filter((item: any) => item.parentId === null);
                state.classifyTwoList = res.data.data.filter((item: any) => item.parentId !== null);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

            return {
                handleSearch,
                onOpenDialogRef,
                onHandleSizeChange,
                onDelRiskControlMeasure,
                onHandleCurrentChange,
                riskControlMeasureDialog,
                riskControlMeasureDialogRef,
                initRiskControlMeasureData,
                ...toRefs(state),
            };
        },
    });
        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            riskControlMeasureDialogRef.value.openSafetyRiskEventDialog(
                type,
                value,
                state.allSafetyRiskEventData,
                state.classifyOneList,
                state.classifyTwoList
            );
        };

        // 删除角色
        const onDelRiskControlMeasure = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条风险管控措施：“${row.produceDeviceName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await riskControlMeasureApi().deleteRiskControlMeasure({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initRiskControlMeasureData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.riskControlMeasureData.params.pageSize = val;
            initRiskControlMeasureData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.riskControlMeasureData.params.pageIndex = val;
            initRiskControlMeasureData();
        };

        // 页面加载时
        onMounted(() => {
            initRiskControlMeasureData();
            getAllSafetyRiskEvent();
            getClassify();
        });

        return {
            dateFormat,
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelRiskControlMeasure,
            onHandleCurrentChange,
            riskControlMeasureDialog,
            riskControlMeasureDialogRef,
            initRiskControlMeasureData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.basic-search{
    display:inline-block;
    padding-left: 10px;
}
</style>
<style scoped></style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskAnalyseUnit/components/safetyRiskAnalyseUnitDialog.vue

@@ -1,26 +1,45 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskAnalyseUnitDialog" width="600px">
            <el-form :model="safetyRiskAnalyseUnitForm" :rules="safetyRiskAnalyseUnitFormRules" ref="safetyRiskAnalyseUnitFormRef" size="default" label-width="180px">
            <el-form
                :model="safetyRiskAnalyseUnitForm"
                :rules="safetyRiskAnalyseUnitFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全风险分析对象编码" prop="riskCode">
                            <el-input class="input-length" v-model="safetyRiskAnalyseUnitForm.riskCode" placeholder="请输入安全风险分析对象编码"></el-input>
                            <el-input
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.riskCode"
                                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="riskUnitName">
                            <el-input class="input-length" v-model="safetyRiskAnalyseUnitForm.riskUnitName" placeholder="请输入安全风险分析单元名称"></el-input>
                            <el-input
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.riskUnitName"
                                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="produceDeviceId">
                            <el-select class="input-length" v-model="safetyRiskAnalyseUnitForm.produceDeviceId" placeholder="请输入生产装置名称" clearable>
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.produceDeviceId"
                                placeholder="请输入生产装置名称"
                                clearable
                            >
                                <el-option
                                v-for="item in allProduceDeviceData"
                                :key="item.id"
                                :label="item.produceDeviceName"
                                :value="item.id"
                                    v-for="item in allProduceDeviceData"
                                    :key="item.id"
                                    :label="item.produceDeviceName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
@@ -28,13 +47,13 @@
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任部门" prop="liableDepId">
                            <el-cascader
                                @change="achiveUserList"
                                @change="achieveUserList"
                                :options="departmentList"
                                :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                                placeholder="请选择部门"
                                clearable
                                filterable
                                style="width:85%"
                                style="width: 85%"
                                v-model="safetyRiskAnalyseUnitForm.liableDepId"
                            >
                            </el-cascader>
@@ -42,190 +61,177 @@
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="责任人" prop="liablePersonId">
                            <el-select class="input-length" v-model="safetyRiskAnalyseUnitForm.liablePersonId" placeholder="请选择责任人" clearable filterable>
                                <el-option
                                v-for="item in userList"
                                :key="item.uid"
                                :label="item.realName"
                                :value="item.uid"
                                ></el-option>
                            <el-select
                                class="input-length"
                                v-model="safetyRiskAnalyseUnitForm.liablePersonId"
                                placeholder="请选择责任人"
                                clearable
                                filterable
                            >
                                <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskAnalyseUnitDialog = !isSafetyRiskAnalyseUnitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskAnalyseUnitDialog" size="default">确 实</el-button>
                </span>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskAnalyseUnitDialog = !isSafetyRiskAnalyseUnitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskAnalyseUnitDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    interface stateType{
        isSafetyRiskAnalyseUnitDialog:Boolean,
        safetyRiskAnalyseUnitForm:{
            riskCode: string | null,
            riskUnitName: string | null,
            liablePersonId: number | null,
            liableDepId: number | null,
            produceDeviceId: number | null,
        },
        title: string,
        userList:[],
        departmentList: [],
        allProduceDeviceData: [],
        safetyRiskAnalyseUnitFormRules:{}
    }
    interface levelListState {

    }
    import { reactive, toRefs, ref} from 'vue'
    import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
    import { ElMessage } from 'element-plus';
interface stateType {
    isSafetyRiskAnalyseUnitDialog: Boolean;
    safetyRiskAnalyseUnitForm: {
        riskCode: string | null;
        riskUnitName: string | null;
        liablePersonId: number | null;
        liableDepId: number | null;
        produceDeviceId: number | null;
    };
    title: string;
    userList: [];
    departmentList: [];
    allProduceDeviceData: [];
    safetyRiskAnalyseUnitFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/user';
    export default {
        name: "productionDeviceDialog",
        setup(props, context) {
            const safetyRiskAnalyseUnitFormRef = ref();
            const state = reactive<stateType>({
                title:'',
                userList:[],
                departmentList: [],
                allProduceDeviceData: [],
                isSafetyRiskAnalyseUnitDialog: false,
                safetyRiskAnalyseUnitForm: {
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            userList: [],
            departmentList: [],
            allProduceDeviceData: [],
            isSafetyRiskAnalyseUnitDialog: false,
            safetyRiskAnalyseUnitForm: {
                riskCode: null,
                riskUnitName: null,
                liablePersonId: null,
                liableDepId: null,
                produceDeviceId: null
            },
            safetyRiskAnalyseUnitFormRules: {
                riskCode: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitName: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }],
                liableDepId: [{ required: true, message: '请选择责任部门', trigger: 'change' }],
                liablePersonId: [{ required: true, message: '请选择责任人', trigger: 'change' }],
                produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }]
            }
        });

        //打开模态框
        const openSafetyRiskAnalyseUnitDialog = (type: string, value: object, department: [], allProduceDeviceData: []) => {
            // console.log(jsonBig.stringify(123124124124214123131))
            state.isSafetyRiskAnalyseUnitDialog = true;
            state.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险分析单元';
                state.safetyRiskAnalyseUnitForm = {
                    riskCode: null,
                    riskUnitName: null,
                    liablePersonId: null,
                    liableDepId: null,
                    produceDeviceId: null,
                },
                safetyRiskAnalyseUnitFormRules:{
                    riskCode: [
                        { required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' },
                    ],
                    riskUnitName: [
                        { required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' },
                    ],
                    liableDepId: [
                        { required: true, message: '请选择责任部门', trigger: 'change' },
                    ],
                    liablePersonId: [
                        { required: true, message: '请选择责任人', trigger: 'change' },
                    ],
                    produceDeviceId: [
                        { required: true, message: '请选择生产装置', trigger: 'change' },
                    ],
                }
                    produceDeviceId: null
                };
            } else {
                state.title = '修改风险分析单元';
                state.safetyRiskAnalyseUnitForm = JSON.parse(JSON.stringify(value));
            }
        };

            });

            //打开模态框
            const openSafetyRiskAnalyseUnitDialog = (type: string, value: object, department: [], allProduceDeviceData : []) => {
                // console.log(jsonBig.stringify(123124124124214123131))
                state.isSafetyRiskAnalyseUnitDialog = true;
                state.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
                state.departmentList = department;
                setTimeout(() => {
                    safetyRiskAnalyseUnitFormRef.value.clearValidate()
                })
                if(type === '新增'){
                    state.title = '新增风险分析单元';
                    state.safetyRiskAnalyseUnitForm = {
                        riskCode: null,
                        riskUnitName: null,
                        liablePersonId: null,
                        liableDepId: null,
                        produceDeviceId: null,
                    };
                }else{
                    state.title = '修改风险分析单元';
                    state.safetyRiskAnalyseUnitForm = JSON.parse(JSON.stringify(value));
                }
            };

            //新增修改提交
            const submitSafetyRiskAnalyseUnitDialog = async () => {
                safetyRiskAnalyseUnitFormRef.value.validate( async (valid: Boolean) => {
                    if(valid){
                        if(state.title === '新增风险分析单元'){
                            let res = await safetyRiskAnalyseUnitApi().addSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'风险分析单元新增成功',
                                duration:2000
                                });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        }else{
                            let res = await safetyRiskAnalyseUnitApi().modSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'风险分析单元修改成功',
                                duration:2000
        //新增修改提交
        const submitSafetyRiskAnalyseUnitDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险分析单元') {
                        let res = await safetyRiskAnalyseUnitApi().addSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }else{
                        ElMessage({
                            type:'warning',
                            message:'请完善基本信息',
                        });
                    } else {
                        let res = await safetyRiskAnalyseUnitApi().modSafetyRiskAnalyseUnit(state.safetyRiskAnalyseUnitForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险分析单元修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskAnalyseUnitDialog = false;
                            context.emit('refreshSafetyRiskAnalyseUnit');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                })
            };

            const achiveUserList = () => {
                state.safetyRiskAnalyseUnitForm.liablePersonId = null;
                state.userList = [];
                getUserData();
            };

            //获取用户列表
            const getUserData = async () => {
                let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitForm.liableDepId);
                if(res.data.code === '200'){
                    state.userList = res.data.data;
                }else{
                } else {
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            }
            });
        };

            return{
                ...toRefs(state),
                achiveUserList,
                safetyRiskAnalyseUnitFormRef,
                submitSafetyRiskAnalyseUnitDialog,
                openSafetyRiskAnalyseUnitDialog,
            };
        }
        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitForm.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitForm.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        return {
            ...toRefs(state),
            achieveUserList,
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskAnalyseUnitDialog,
            openSafetyRiskAnalyseUnitDialog
        };
    }
};
</script>

<style scoped>
.input-length{
    width:85%;
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskAnalyseUnit/index.vue

@@ -2,43 +2,38 @@
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-search">
                <div class="basic-line">
                    <span>责任部门：</span>
                    <el-cascader
                        @change="achiveUserList"
                        @change="achieveUserList"
                        :options="departmentList"
                        :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'name' }"
                        placeholder="责任部门"
                        clearable
                        filterable
                        v-model="safetyRiskAnalyseUnitData.params.liableDep"
                        class="unit-input"
                        class="input-box"
                        v-model="safetyRiskAnalyseUnitData.params.liableDepId"
                    >
                    </el-cascader>
                </div>
                <div class="basic-search">
                <div class="basic-line">
                    <span>责任人：</span>
                    <el-select v-model="safetyRiskAnalyseUnitData.params.liablePerson" clearable filterable class="unit-input" placeholder="责任人">
                        <el-option
                        v-for="item in userList"
                        :key="item.uid"
                        :label="item.realName"
                        :value="item.uid"
                        ></el-option>
                    <el-select v-model="safetyRiskAnalyseUnitData.params.liablePersonId" clearable filterable class="input-box" placeholder="责任人">
                        <el-option v-for="item in userList" :key="item.uid" :label="item.realName" :value="item.uid"></el-option>
                    </el-select>
                </div>
                <div class="basic-search">
                <div class="basic-line">
                    <span>单元名称：</span>
                    <el-input v-model="safetyRiskAnalyseUnitData.params.riskUnitName" clearable filterable class="unit-input" placeholder="单元名称">
                    <el-input v-model="safetyRiskAnalyseUnitData.params.riskUnitName" clearable filterable class="input-box" placeholder="单元名称">
                    </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" @click="handleSearch">
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
@@ -53,234 +48,222 @@
                <el-table-column prop="liableDep" label="责任部门" show-overflow-tooltip></el-table-column>
                <el-table-column prop="liablePerson" label="责任人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelProductionDevice(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskAnalyseUnitData.params.pageIndex"
                background
                v-model:page-size="safetyRiskAnalyseUnitData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskAnalyseUnitData.total"
            >
            </el-pagination>
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskAnalyseUnitData.params.pageIndex"
                background
                v-model:page-size="safetyRiskAnalyseUnitData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskAnalyseUnitData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskAnalyseUnitDialog ref="safetyRiskAnalyseUnitDialogRef" @refreshSafetyRiskAnalyseUnit ="initSafetyRiskAnalyseUnitData"/>
        <safetyRiskAnalyseUnitDialog ref="safetyRiskAnalyseUnitDialogRef" @refreshSafetyRiskAnalyseUnit="initSafetyRiskAnalyseUnitData" />
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
    import { safetyRiskAnalyseUnitApi } from "/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts";
    import { departmentApi } from '/@/api/department';
    import { userApi } from '/@/api/user';
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskAnalyseUnitDialog from './components/safetyRiskAnalyseUnitDialog.vue';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit/index.ts';
import { departmentApi } from '/@/api/department';
import { userApi } from '/@/api/user';
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice';

    // 定义接口来定义对象的类型
    interface TableData {
        roleName: string;
        roleSign: string;
        describe: string;
        sort: number;
        status: boolean;
        createTime: string;
    }
    interface TableDataState {
        safetyRiskAnalyseUnitData: {
            data: Array<TableData>;
            total: number;
            loading: boolean;
            params: {
                pageIndex: number;
                pageSize: number;
                riskUnitName: string | null;
                liableDepId: number | null;
                liablePersonId: number | null;
            };
// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskAnalyseUnitData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskUnitName: string | null;
            liableDepId: number | null;
            liablePersonId: number | null;
        };
        userList:Array<UserState>;
        departmentList:Array<DepartmentState>;
        allProduceDeviceData:Array<produceDeviceState>;
    }
    interface produceDeviceState {
    };
    userList: Array<UserState>;
    departmentList: Array<DepartmentState>;
    allProduceDeviceData: Array<produceDeviceState>;
}
interface produceDeviceState {}
interface DepartmentState {}
interface UserState {}

    }
    interface DepartmentState {

    }
    interface UserState {

    }

    export default ({
        name: 'productionDevice',
        components: { safetyRiskAnalyseUnitDialog },
        setup() {
            const safetyRiskAnalyseUnitDialogRef = ref();
            const state = reactive<TableDataState>({
                safetyRiskAnalyseUnitData: {
                    data: [],
                    total: 0,
                    loading: false,
                    params: {
                        pageIndex: 1,
                        pageSize: 10,
                        riskUnitName: null,
                        liableDepId: null,
                        liablePersonId: null,
                    },
                },
                userList: [],
                departmentList: [],
                allProduceDeviceData: [],
            });
            // 初始化表格数据
            const initSafetyRiskAnalyseUnitData = async () => {
                let res = await safetyRiskAnalyseUnitApi().getSafetyRiskAnalyseUnitList(state.safetyRiskAnalyseUnitData.params)
                if(res.data.code === '200'){
                    state.safetyRiskAnalyseUnitData.data = res.data.data
                    state.safetyRiskAnalyseUnitData.total = res.data.count;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    });
export default {
    name: 'productionDevice',
    components: { safetyRiskAnalyseUnitDialog },
    setup() {
        const safetyRiskAnalyseUnitDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskAnalyseUnitData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskUnitName: null,
                    liableDepId: null,
                    liablePersonId: null
                }
            };

            const achiveUserList = () => {
                state.safetyRiskAnalyseUnitData.params.liablePersonId = null;
                state.userList = [];
                getUserData();
            };

            //获取生产装置列表
            const getAllProduceDeviceData = async () => {
                let res = await productionDeviceApi().getAllProductionDeviceList();
                if(res.data.code === '200'){
                    state.allProduceDeviceData = res.data.data;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    });
                }
            };

            //获取部门列表
            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 getUserData = async () => {
                let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitData.params.liableDepId);
                if(res.data.code === '200'){
                    state.userList = res.data.data;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    });
                }
            }

            // 打开生产装置弹窗
            const onOpenDialogRef = (type: string, value: any) => {
                safetyRiskAnalyseUnitDialogRef.value.openSafetyRiskAnalyseUnitDialog(type, value, state.departmentList, state.allProduceDeviceData);
            };
            
            // 删除角色
            const onDelProductionDevice = (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.riskUnitName}”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
            },
            userList: [],
            departmentList: [],
            allProduceDeviceData: []
        });
        // 初始化表格数据
        const initSafetyRiskAnalyseUnitData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getSafetyRiskAnalyseUnitList(state.safetyRiskAnalyseUnitData.params);
            if (res.data.code === '200') {
                state.safetyRiskAnalyseUnitData.data = res.data.data;
                state.safetyRiskAnalyseUnitData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                }).then(async () => {
                    let res = await safetyRiskAnalyseUnitApi().deleteSafetyRiskAnalyseUnit({id:row.id});
                    if(res.data.code ==='200'){
                        ElMessage({
                            type:'success',
                            duration:2000,
                            message:'删除成功'
                        });
                    await initSafetyRiskAnalyseUnitData();
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        });
                    }
                }).catch(() => {});
            };

            const handleSearch = () => {
                initSafetyRiskAnalyseUnitData();
                    message: res.data.msg
                });
            }
        };

            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.safetyRiskAnalyseUnitData.params.pageSize = val;
                initSafetyRiskAnalyseUnitData();
            };
        const achieveUserList = () => {
            state.safetyRiskAnalyseUnitData.params.liablePersonId = null;
            state.userList = [];
            getUserData();
        };

            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.safetyRiskAnalyseUnitData.params.pageIndex = val;
                initSafetyRiskAnalyseUnitData();
            };
        //获取生产装置列表
        const getAllProduceDeviceData = async () => {
            let res = await productionDeviceApi().getAllProductionDeviceList();
            if (res.data.code === '200') {
                state.allProduceDeviceData = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

            // 页面加载时
            onMounted(() => {
                initSafetyRiskAnalyseUnitData();
                getAllProduceDeviceData();
                getDepartmentData();
            });
        //获取部门列表
        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
                });
            }
        };

            return {
                handleSearch,
                achiveUserList,
                onOpenDialogRef,
                onHandleSizeChange,
                onDelProductionDevice,
                onHandleCurrentChange,
                safetyRiskAnalyseUnitDialog,
                safetyRiskAnalyseUnitDialogRef,
                initSafetyRiskAnalyseUnitData,
                ...toRefs(state),
            };
        },
    });
        //获取用户列表
        const getUserData = async () => {
            let res = await userApi().getUserLByDepartment(state.safetyRiskAnalyseUnitData.params.liableDepId);
            if (res.data.code === '200') {
                state.userList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 打开生产装置弹窗
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskAnalyseUnitDialogRef.value.openSafetyRiskAnalyseUnitDialog(type, value, state.departmentList, state.allProduceDeviceData);
        };

        // 删除角色
        const onDelProductionDevice = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险分析单元：“${row.riskUnitName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskAnalyseUnitApi().deleteSafetyRiskAnalyseUnit({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskAnalyseUnitData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

        const handleSearch = () => {
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageSize = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskAnalyseUnitData.params.pageIndex = val;
            initSafetyRiskAnalyseUnitData();
        };

        // 页面加载时
        onMounted(() => {
            initSafetyRiskAnalyseUnitData();
            getAllProduceDeviceData();
            getDepartmentData();
        });

        return {
            handleSearch,
            achieveUserList,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelProductionDevice,
            onHandleCurrentChange,
            safetyRiskAnalyseUnitDialog,
            safetyRiskAnalyseUnitDialogRef,
            initSafetyRiskAnalyseUnitData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.basic-search{
    display:inline-block;
    padding-left: 10px;
}
.unit-input{
    width:200px
}
</style>
<style scoped></style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskEvent/components/safetyRiskEventDialog.vue

@@ -1,154 +1,160 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isSafetyRiskEventDialog" width="600px">
            <el-form :model="safetyRiskEventForm" :rules="safetyRiskEventFormRules" ref="safetyRiskAnalyseUnitFormRef" size="default" label-width="180px">
            <el-form
                :model="safetyRiskEventForm"
                :rules="safetyRiskEventFormRules"
                ref="safetyRiskAnalyseUnitFormRef"
                size="default"
                label-width="180px"
            >
                <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 class="input-length" v-model="safetyRiskEventForm.riskUnitId" placeholder="请输入安全风险分析单元名称">
                                <el-option
                                v-for="item in allSafetyRiskEventData"
                                :key="item.id"
                                :label="item.riskUnitName"
                                :value="item.id"
                                    v-for="item in allSafetyRiskEventData"
                                    :key="item.id"
                                    :label="item.riskUnitName"
                                    :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="riskEventName">
                            <el-input class="input-length" v-model="safetyRiskEventForm.riskEventName" placeholder="请输入生产装置名称" clearable></el-input>
                            <el-input
                                class="input-length"
                                v-model="safetyRiskEventForm.riskEventName"
                                placeholder="请输入生产装置名称"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskEventDialog = !isSafetyRiskEventDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskEventDialog" size="default">确 实</el-button>
                </span>
                <span class="dialog-footer">
                    <el-button @click="isSafetyRiskEventDialog = !isSafetyRiskEventDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitSafetyRiskEventDialog" v-throttle size="default">确 实</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    interface stateType{
        isSafetyRiskEventDialog:Boolean,
        safetyRiskEventForm:{
            riskEventName: string | null,
            riskUnitId: number | null,
        },
        title: string,
        departmentList: [],
        allSafetyRiskEventData: [],
        safetyRiskEventFormRules: {},
    }
    import { reactive, toRefs, ref} from 'vue'
    import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';
    import { ElMessage } from 'element-plus';
    export default {
        name: "productionDeviceDialog",
        setup(props, context) {
            const safetyRiskAnalyseUnitFormRef = ref();
            const state = reactive<stateType>({
                title:'',
                departmentList: [],
                allSafetyRiskEventData:[],
                isSafetyRiskEventDialog: false,
                safetyRiskEventForm: {
                    riskEventName: null,
                    riskUnitId: null,
                },
                safetyRiskEventFormRules:{
                    riskEventName: [
                        { required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' },
                    ],
                    riskUnitId: [
                        { required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' },
                    ],
                }
interface stateType {
    isSafetyRiskEventDialog: Boolean;
    safetyRiskEventForm: {
        riskEventName: string | null;
        riskUnitId: number | null;
    };
    title: string;
    departmentList: [];
    allSafetyRiskEventData: [];
    safetyRiskEventFormRules: {};
}
import { reactive, toRefs, ref } from 'vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent';
import { ElMessage } from 'element-plus';
export default {
    name: 'productionDeviceDialog',
    setup(props: any, context: any) {
        const safetyRiskAnalyseUnitFormRef = ref();
        const state = reactive<stateType>({
            title: '',
            departmentList: [],
            allSafetyRiskEventData: [],
            isSafetyRiskEventDialog: false,
            safetyRiskEventForm: {
                riskEventName: null,
                riskUnitId: null
            },
            safetyRiskEventFormRules: {
                riskEventName: [{ required: true, message: '请填写安全风险分析对象编码', trigger: 'blur' }],
                riskUnitId: [{ required: true, message: '请填写安全风险分析单元名称', trigger: 'blur' }]
            }
        });

        //打开模态框
        const openSafetyRiskEventDialog = (type: string, value: object, department: [], allSafetyRiskEventData: []) => {
            state.isSafetyRiskEventDialog = true;
            state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
            state.departmentList = department;
            setTimeout(() => {
                safetyRiskAnalyseUnitFormRef.value.clearValidate();
            });
            if (type === '新增') {
                state.title = '新增风险事件';
                state.safetyRiskEventForm = {
                    riskEventName: null,
                    riskUnitId: null
                };
            } else {
                state.title = '修改风险事件';
                state.safetyRiskEventForm = JSON.parse(JSON.stringify(value));
            }
        };

            //打开模态框
            const openSafetyRiskEventDialog = (type: string, value: object, department: [], allSafetyRiskEventData:[]) => {
                state.isSafetyRiskEventDialog = true;
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(allSafetyRiskEventData));
                state.departmentList = department;
                setTimeout(() => {
                    safetyRiskAnalyseUnitFormRef.value.clearValidate()
                })
                if(type === '新增'){
                    state.title = '新增生产装置';
                    state.safetyRiskEventForm = {
                        riskEventName: null,
                        riskUnitId: null,
                    };
                }else{
                    state.title = '修改生产装置';
                    state.safetyRiskEventForm = JSON.parse(JSON.stringify(value));
                }
            };

            //新增修改提交
            const submitSafetyRiskEventDialog = async () => {
                safetyRiskAnalyseUnitFormRef.value.validate( async (valid: Boolean) => {
                    if(valid){
                        if(state.title === '新增生产装置'){
                            let res = await safetyRiskEventApi().addSafetyRiskEvent(state.safetyRiskEventForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置新增成功',
                                duration:2000
                                });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        }else{
                            let res = await safetyRiskEventApi().modSafetyRiskEvent(state.safetyRiskEventForm);
                            if(res.data.code === '200'){
                                ElMessage({
                                type:'success',
                                message:'生产装置修改成功',
                                duration:2000
        //新增修改提交
        const submitSafetyRiskEventDialog = async () => {
            safetyRiskAnalyseUnitFormRef.value.validate(async (valid: Boolean) => {
                if (valid) {
                    if (state.title === '新增风险事件') {
                        let res = await safetyRiskEventApi().addSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件新增成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                            }else{
                                ElMessage({
                                    type:'warning',
                                    message:res.data.msg
                                });
                            }
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }else{
                        ElMessage({
                            type:'warning',
                            message:'请完善基本信息',
                        });
                    } else {
                        let res = await safetyRiskEventApi().modSafetyRiskEvent(state.safetyRiskEventForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险事件修改成功',
                                duration: 2000
                            });
                            state.isSafetyRiskEventDialog = false;
                            context.emit('refreshSafetyRiskEvent');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }
                } else {
                    ElMessage({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            });
        };

            return{
                ...toRefs(state),
                safetyRiskAnalyseUnitFormRef,
                submitSafetyRiskEventDialog,
                openSafetyRiskEventDialog,
            };
        }
        return {
            ...toRefs(state),
            safetyRiskAnalyseUnitFormRef,
            submitSafetyRiskEventDialog,
            openSafetyRiskEventDialog
        };
    }
};
</script>

<style scoped>
.input-length{
    width:85%;
.input-length {
    width: 85%;
}
</style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskEvent/index.vue

@@ -2,33 +2,27 @@
    <div class="system-role-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <div class="basic-search">
                <div class="basic-line">
                    <span>安全风险单元名称：</span>
                    <el-select v-model="safetyRiskEventData.params.riskUnitId" class="unit-input" placeholder="安全风险单元名称">
                            <el-option
                            v-for="item in allSafetyRiskEventData"
                            :key="item.id"
                            :label="item.riskUnitName"
                            :value="item.id"
                            ></el-option>
                    <el-select v-model="safetyRiskEventData.params.riskUnitId" class="input-box" placeholder="安全风险单元名称">
                        <el-option v-for="item in allSafetyRiskEventData" :key="item.id" :label="item.riskUnitName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-search">
                <div class="basic-line">
                    <span>安全风险事件名称：</span>
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="unit-input" placeholder="安全风险事件名称">
                    </el-input>
                    <el-input v-model="safetyRiskEventData.params.riskEventName" class="input-box" placeholder="安全风险事件名称"> </el-input>
                </div>
                <el-button size="default" type="primary" class="ml10" @click="handleSearch">
                <el-button size="default" type="primary" class="ml10" v-throttle @click="handleSearch">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增','')">
                <el-button size="default" type="success" class="ml10" @click="onOpenDialogRef('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增单元
                    新增事件
                </el-button>
            </div>
            <el-table :data="safetyRiskEventData.data" style="width: 100%">
@@ -36,206 +30,177 @@
                <el-table-column prop="riskUnitName" label="安全风险分析单元名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="riskEventName" label="安全风险事件名称" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditByUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gtmCreate" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改',scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onOpenDialogRef('修改', scope.row)">修改</el-button>
                        <el-button size="small" text type="danger" @click="onDelSafetyRiskEvent(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskEventData.params.pageIndex"
                background
                v-model:page-size="safetyRiskEventData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskEventData.total"
            >
            </el-pagination>
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                v-model:current-page="safetyRiskEventData.params.pageIndex"
                background
                v-model:page-size="safetyRiskEventData.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="safetyRiskEventData.total"
            >
            </el-pagination>
        </el-card>
        <safetyRiskEventDialog ref="safetyRiskEventDialogRef" @refreshSafetyRiskEvent ="initSafetyRiskEventData"/>
        <safetyRiskEventDialog ref="safetyRiskEventDialogRef" @refreshSafetyRiskEvent="initSafetyRiskEventData" />
    </div>
</template>

<script lang="ts">
    import { toRefs, reactive, onMounted, ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
    import { safetyRiskEventApi } from "/@/api/doublePreventSystem/safetyRiskEvent/index.ts";
    import { departmentApi } from '/@/api/department';
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import safetyRiskEventDialog from './components/safetyRiskEventDialog.vue';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { departmentApi } from '/@/api/department';
import { safetyRiskAnalyseUnitApi } from '/@/api/doublePreventSystem/safetyRiskAnalyseUnit';

    // 定义接口来定义对象的类型
    interface TableData {
        roleName: string;
        roleSign: string;
        describe: string;
        sort: number;
        status: boolean;
        createTime: string;
    }
    interface TableDataState {
        safetyRiskEventData: {
            data: Array<TableData>;
            total: number;
            loading: boolean;
            params: {
                pageIndex: number;
                pageSize: number;
                riskEventName: string | null;

            };
// 定义接口来定义对象的类型
interface TableData {
    roleName: string;
    roleSign: string;
    describe: string;
    sort: number;
    status: boolean;
    createTime: string;
}
interface TableDataState {
    safetyRiskEventData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        params: {
            pageIndex: number;
            pageSize: number;
            riskEventName: string | null;
        };
        departmentList:Array<DepartmentState>;
        allSafetyRiskEventData:Array<safetyRiskEventState>;
    
    }
    interface safetyRiskEventState {
    };
    allSafetyRiskEventData: Array<safetyRiskEventState>;
}
interface safetyRiskEventState {}

    }
    interface DepartmentState {

    }

    export default ({
        name: 'productionDevice',
        components: { safetyRiskEventDialog },
        setup() {
            const safetyRiskEventDialogRef = ref();
            const state = reactive<TableDataState>({
                safetyRiskEventData: {
                    data: [],
                    total: 0,
                    loading: false,
                    params: {
                        pageIndex: 1,
                        pageSize: 10,
                        riskEventName: null,
                    },
                },
                departmentList:[],
                allSafetyRiskEventData:[],
            });
            // 初始化表格数据
            const initSafetyRiskEventData = async () => {
                let res = await safetyRiskEventApi().getSafetyRiskEventList(state.safetyRiskEventData.params);
                if(res.data.code === '200'){
                    state.safetyRiskEventData.data = res.data.data;
                    state.safetyRiskEventData.total = res.data.count;
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    })
export default {
    name: 'productionDevice',
    components: { safetyRiskEventDialog },
    setup() {
        const safetyRiskEventDialogRef = ref();
        const state = reactive<TableDataState>({
            safetyRiskEventData: {
                data: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    riskEventName: null
                }
            };

            // 获取安全风险分析单元数据
            const getAllSafetyRiskEventData = async () => {
                let res = await safetyRiskAnalyseUnitApi().getAllSafetyRiskAnalyseUnitList();
                if(res.data.code === '200'){
                    state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
                }else{
                    ElMessage({
                        type:'warning',
                        message:res.data.msg
                    });
                }
            };

            // 获取部门列表
            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 onOpenDialogRef = (type: string, value: any) => {
                safetyRiskEventDialogRef.value.openSafetyRiskEventDialog(type, value, state.departmentList, state.allSafetyRiskEventData);
            };
            
            // 删除角色
            const onDelSafetyRiskEvent = (row: any) => {
                ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.riskEventName}”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
            },
            allSafetyRiskEventData: []
        });
        // 初始化表格数据
        const initSafetyRiskEventData = async () => {
            let res = await safetyRiskEventApi().getSafetyRiskEventList(state.safetyRiskEventData.params);
            if (res.data.code === '200') {
                state.safetyRiskEventData.data = res.data.data;
                state.safetyRiskEventData.total = res.data.count;
            } else {
                ElMessage({
                    type: 'warning',
                }).then(async () => {
                    let res = await safetyRiskEventApi().deleteSafetyRiskEvent({id:row.id});
                    if(res.data.code ==='200'){
                        ElMessage({
                            type:'success',
                            duration:2000,
                            message:'删除成功'
                        })
                    await initSafetyRiskEventData();
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        });
                    }
                }).catch(() => {});
            };

            const handleSearch = () => {
                initSafetyRiskEventData();
                    message: res.data.msg
                });
            }
        };

            // 分页改变
            const onHandleSizeChange = (val: number) => {
                state.safetyRiskEventData.params.pageSize = val;
                initSafetyRiskEventData();
            };
        // 获取安全风险分析单元数据
        const getAllSafetyRiskEventData = async () => {
            let res = await safetyRiskAnalyseUnitApi().getAllSafetyRiskAnalyseUnitList();
            if (res.data.code === '200') {
                state.allSafetyRiskEventData = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

            // 分页改变
            const onHandleCurrentChange = (val: number) => {
                state.safetyRiskEventData.params.pageIndex = val;
                initSafetyRiskEventData();
            };
        // 打开安全风险事件
        const onOpenDialogRef = (type: string, value: any) => {
            safetyRiskEventDialogRef.value.openSafetyRiskEventDialog(type, value, state.allSafetyRiskEventData);
        };

            // 页面加载时
            onMounted(() => {
                getAllSafetyRiskEventData();
                initSafetyRiskEventData();
                getDepartmentData();
            });
        // 删除角色
        const onDelSafetyRiskEvent = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该条安全风险事件：“${row.riskEventName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await safetyRiskEventApi().deleteSafetyRiskEvent({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSafetyRiskEventData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };

            return {
                handleSearch,
                onOpenDialogRef,
                onHandleSizeChange,
                onDelSafetyRiskEvent,
                onHandleCurrentChange,
                safetyRiskEventDialog,
                safetyRiskEventDialogRef,
                initSafetyRiskEventData,
                ...toRefs(state),
            };
        },
    });
        const handleSearch = () => {
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.safetyRiskEventData.params.pageSize = val;
            initSafetyRiskEventData();
        };

        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.safetyRiskEventData.params.pageIndex = val;
            initSafetyRiskEventData();
        };

        // 页面加载时
        onMounted(() => {
            getAllSafetyRiskEventData();
            initSafetyRiskEventData();
        });

        return {
            handleSearch,
            onOpenDialogRef,
            onHandleSizeChange,
            onDelSafetyRiskEvent,
            onHandleCurrentChange,
            safetyRiskEventDialog,
            safetyRiskEventDialogRef,
            initSafetyRiskEventData,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped>
.basic-search{
    display:inline-block;
    padding-left: 10px;
}
.unit-input{
    width:200px
}
</style>
<style scoped></style>

 src/views/doublePreventSystem/riskLevelManage/safetyRiskSpaceImg/index.vue

@@ -1,13 +1,13 @@
<template>

  <div>
    <h1></h1>
  </div>
</template>

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

<style scoped>

</style>
<style scoped></style>

 src/views/system/menu/component/menuDialog.vue

@@ -1,267 +1,267 @@
<template>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                    :options="menuData"
                                    :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                    placeholder="请选择上级菜单"
                                    clearable
                                    class="w100"
                                    v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                        </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="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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="ruleForm.name" placeholder="路由中的 name 值" 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="ruleForm.path" placeholder="路由中的 path 值" 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="ruleForm.redirect" 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="菜单图标">
                            <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
                        </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="ruleForm.component" 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-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
                                <el-option label="admin" value="admin"></el-option>
                                <el-option label="common" value="common"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="项目名">
                            <el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
                                <el-option
                                        v-for="item in projectList"
                                        :key="item.key"
                                        :value="item.id"
                                        :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单排序">
                            <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否隐藏">
                            <el-radio-group v-model="ruleForm.meta.isHide">
                                <el-radio :label="true">隐藏</el-radio>
                                <el-radio :label="false">不隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <div class="system-add-menu-container">
        <el-dialog :title="title" v-model="isShowDialog" width="769px">
            <el-form :model="ruleForm" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上级菜单">
                            <el-cascader
                                :options="menuData"
                                :props="{ checkStrictly: true, value: 'id', label: 'title' }"
                                placeholder="请选择上级菜单"
                                clearable
                                class="w100"
                                v-model="ruleForm.menuSuperior"
                            >
                            </el-cascader>
                        </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="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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="ruleForm.name" placeholder="路由中的 name 值" 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="ruleForm.path" placeholder="路由中的 path 值" 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="ruleForm.redirect" 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="菜单图标">
                            <input placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
                            <!--                            <IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />-->
                        </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="ruleForm.component" 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-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
                                <el-option label="admin" value="admin"></el-option>
                                <el-option label="common" value="common"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="项目名">
                            <el-select
                                @change="handelMenu"
                                v-model="ruleForm.projectId"
                                controls-position="right"
                                placeholder="请输入排序"
                                class="w100"
                            >
                                <el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="菜单排序">
                            <el-input-number v-model="ruleForm.priority" controls-position="right" placeholder="请输入排序" class="w100" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否隐藏">
                            <el-radio-group v-model="ruleForm.meta.isHide">
                                <el-radio :label="true">隐藏</el-radio>
                                <el-radio :label="false">不隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ buttonName }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { reactive, toRefs, onMounted, defineComponent } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useRoutesList } from '/@/stores/routesList';
    import { i18n } from '/@/i18n/index';
    import IconSelector from '/@/components/iconSelector/index.vue';
    import { useMenuApi } from '/@/api/menu/index'
    import { ElMessageBox, ElMessage } from 'element-plus';
    import {Session} from "/@/utils/storage";
    // import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { i18n } from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue';
import { useMenuApi } from '/@/api/menu/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

    export default defineComponent({
        name: 'systemAddMenu',
        components: { IconSelector },
        setup(props,context) {
            const stores = useRoutesList();
            const { routesList } = storeToRefs(stores);
            const state = reactive({
                isShowDialog: false,
                title:'',
                buttonName:'',
                // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
                ruleForm: {
                    projectId:'',
                    parentId:0,
                    menuSuperior: [], // 上级菜单
                    menuType: 'menu', // 菜单类型
                    name: '', // 路由名称
                    component: '', // 组件路径
                    priority: 0, // 菜单排序
                    path: '', // 路由路径
                    redirect: '', // 路由重定向，有子集 children 时
                    meta: {
                        title: '', // 菜单名称
                        icon: '', // 菜单图标
                        isHide: false, // 是否隐藏
                        isKeepAlive: true, // 是否缓存
                        isAffix: false, // 是否固定
                        isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                        isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                        roles: [], // 权限标识，取角色管理
                    },
                    btnPower: '', // 菜单类型为按钮时，权限标识
                },
                menuData: [], // 上级菜单数据
                projectList:[
                ],
            });
            // 获取 vuex 中的路由
            const getMenuList = (routes: any) => {
                const arr: any = [];
                routes.map((val: any) => {
                    val['title'] = val.meta.title;
                    val['id'] = val.id
                    arr.push(val);
                    if (val.children) getMenuList(val.children);
                });
                return arr;
            };
            // 打开弹窗
            const openDialog = (type:string,value:any,projectList: any,projectId:string) => {
                state.projectList = JSON.parse(JSON.stringify(projectList))
                state.isShowDialog = true;
                if(type === '新增'){
                    state.buttonName = '新增'
                    state.title = '新增菜单'
                    state.ruleForm = {
                        projectId:projectId,
                        parentId:0,
                        menuSuperior: [],
                        menuType: 'menu',
                        name: '',
                        component: '',
                        priority: 0,
                        path: '',
                        redirect: '',
                        meta: {
                            title: '',
                            icon: '',
                            isHide: false,
                            isKeepAlive: true,
                            isAffix: false,
                            isLink: '',
                            isIframe: false,
                            roles: [],
                        },
                        btnPower: '',
                    }
                }else{
                    state.buttonName = '修改'
                    state.title = '修改菜单'
                    state.ruleForm = JSON.parse(JSON.stringify(value))
                    state.ruleForm.projectId = projectId.toString()
                }
                handelMenu()
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            // 是否内嵌下拉改变
            // const onSelectIframeChange = () => {
            //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
            //     else state.ruleForm.isLink = false;
            // };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            // 新增
            const onSubmit = async () => {
                if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
                    let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
                    state.ruleForm.parentId = menuId[menuId.length - 1]
                }
                if(state.title === '新增菜单'){
                    let res = await useMenuApi().addMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单新增成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }else{
                    let res = await useMenuApi().modMenu(state.ruleForm)
                    if(res.data.code === '200'){
                        ElMessage({
                            type:'success',
                            message:'菜单修改成功',
                            duration:2000
                        })
                        closeDialog();
                        context.emit('getMenuList')
                    }else{
                        ElMessage({
                            type:'warning',
                            message:res.data.msg
                        })
                    }
                }
export default defineComponent({
    name: 'systemAddMenu',
    components: { IconSelector },
    setup(props, context) {
        const stores = useRoutesList();
        const { routesList } = storeToRefs(stores);
        const state = reactive({
            isShowDialog: false,
            title: '',
            buttonName: '',
            // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
            ruleForm: {
                projectId: '',
                parentId: 0,
                menuSuperior: [], // 上级菜单
                menuType: 'menu', // 菜单类型
                name: '', // 路由名称
                component: '', // 组件路径
                priority: 0, // 菜单排序
                path: '', // 路由路径
                redirect: '', // 路由重定向，有子集 children 时
                meta: {
                    title: '', // 菜单名称
                    icon: '', // 菜单图标
                    isHide: false, // 是否隐藏
                    isKeepAlive: true, // 是否缓存
                    isAffix: false, // 是否固定
                    isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
                    isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
                    roles: [] // 权限标识，取角色管理
                },
                btnPower: '' // 菜单类型为按钮时，权限标识
            },
            menuData: [], // 上级菜单数据
            projectList: []
        });
        // 获取 vuex 中的路由
        const getMenuList = (routes: any) => {
            const arr: any = [];
            routes.map((val: any) => {
                val['title'] = val.meta.title;
                val['id'] = val.id;
                arr.push(val);
                if (val.children) getMenuList(val.children);
            });
            return arr;
        };
        // 打开弹窗
        const openDialog = (type: string, value: any, projectList: any, projectId: string) => {
            state.projectList = JSON.parse(JSON.stringify(projectList));
            state.isShowDialog = true;
            if (type === '新增') {
                state.buttonName = '新增';
                state.title = '新增菜单';
                state.ruleForm = {
                    projectId: projectId,
                    parentId: 0,
                    menuSuperior: [],
                    menuType: 'menu',
                    name: '',
                    component: '',
                    priority: 0,
                    path: '',
                    redirect: '',
                    meta: {
                        title: '',
                        icon: '',
                        isHide: false,
                        isKeepAlive: true,
                        isAffix: false,
                        isLink: '',
                        isIframe: false,
                        roles: []
                    },
                    btnPower: ''
                };
            } else {
                state.buttonName = '修改';
                state.title = '修改菜单';
                state.ruleForm = JSON.parse(JSON.stringify(value));
                state.ruleForm.projectId = projectId.toString();
            }
            handelMenu();
        };
        // 关闭弹窗
        const closeDialog = () => {
            state.isShowDialog = false;
        };
        // 是否内嵌下拉改变
        // const onSelectIframeChange = () => {
        //     if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
        //     else state.ruleForm.isLink = false;
        // };
        // 取消
        const onCancel = () => {
            closeDialog();
        };
        // 新增
        const onSubmit = async () => {
            if (state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []) {
                let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior));
                state.ruleForm.parentId = menuId[menuId.length - 1];
            }
            if (state.title === '新增菜单') {
                let res = await useMenuApi().addMenu(state.ruleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '菜单新增成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getMenuList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            } else {
                let res = await useMenuApi().modMenu(state.ruleForm);
                if (res.data.code === '200') {
                    ElMessage({
                        type: 'success',
                        message: '菜单修改成功',
                        duration: 2000
                    });
                    closeDialog();
                    context.emit('getMenuList');
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }

                // closeDialog(); // 关闭弹窗
                // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
            };
            // closeDialog(); // 关闭弹窗
            // setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
        };

            const handelMenu = async () => {
                let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId)
                state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            }
            // 页面加载时
            onMounted(async () => {
                // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
                // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
            });
            return {
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                handelMenu,
                ...toRefs(state),
            };
        },
    });
        const handelMenu = async () => {
            let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
            state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
        };
        // 页面加载时
        onMounted(async () => {
            // let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
            // state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
        });
        return {
            openDialog,
            closeDialog,
            onCancel,
            onSubmit,
            handelMenu,
            ...toRefs(state)
        };
    }
});
</script>

 vite.config.ts

@@ -3,77 +3,77 @@
import { defineConfig, loadEnv, ConfigEnv } from 'vite';

const pathResolve = (dir: string): any => {
    return resolve(__dirname, '.', dir);
    return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {
    '/@': pathResolve('./src/'),
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
    '/@': pathResolve('./src/'),
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
};

const viteConfig = defineConfig((mode: ConfigEnv) => {
    const env = loadEnv(mode.mode, process.cwd());
    return {
        plugins: [vue()],
        root: process.cwd(),
        resolve: { alias },
        base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
        hmr: true,
        optimizeDeps: {
            include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
        },
        server: {
            host: '0.0.0.0',
            port: env.VITE_PORT as unknown as number,
            open: env.VITE_OPEN,
            proxy: {
                '/gitee': {
                    target: 'https://gitee.com',
                    ws: true,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/gitee/, ''),
                },
            },
        },
        build: {
            outDir: 'dist',
            sourcemap: false,
            chunkSizeWarningLimit: 1500,
            rollupOptions: {
                output: {
                    entryFileNames: `assets/[name].${new Date().getTime()}.js`,
                    chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
                    assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
                    compact: true,
                    manualChunks: {
                        vue: ['vue', 'vue-router', 'pinia'],
                        echarts: ['echarts'],
                    },
                },
            },
        },
        css: {
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: (atRule) => {
                                if (atRule.name === 'charset') {
                                    atRule.remove();
                                }
                            },
                        },
                    },
                ],
            },
        },
        define: {
            __VUE_I18N_LEGACY_API__: JSON.stringify(false),
            __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
            __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
        },
    };
    const env = loadEnv(mode.mode, process.cwd());
    return {
        plugins: [vue()],
        root: process.cwd(),
        resolve: { alias },
        base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
        hmr: true,
        optimizeDeps: {
            include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw']
        },
        server: {
            host: '0.0.0.0',
            port: env.VITE_PORT as unknown as number,
            open: env.VITE_OPEN,
            proxy: {
                '/gitee': {
                    target: 'https://gitee.com',
                    ws: true,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/gitee/, '')
                }
            }
        },
        build: {
            outDir: 'dist',
            sourcemap: false,
            chunkSizeWarningLimit: 1500,
            rollupOptions: {
                output: {
                    entryFileNames: `assets/[name].${new Date().getTime()}.js`,
                    chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
                    assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
                    compact: true,
                    manualChunks: {
                        vue: ['vue', 'vue-router', 'pinia'],
                        echarts: ['echarts']
                    }
                }
            }
        },
        css: {
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: (atRule) => {
                                if (atRule.name === 'charset') {
                                    atRule.remove();
                                }
                            }
                        }
                    }
                ]
            }
        },
        define: {
            __VUE_I18N_LEGACY_API__: JSON.stringify(false),
            __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
            __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false)
        }
    };
});

export default viteConfig;