风险辨识管理

zhouwenxuan

2024-03-18 38af7850e2c62b28ccb6f990140ac17c4bc21419

风险辨识管理

 src/api/systemManage/riskManage/index.ts

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

export function riskApi() {
    return {
        // v1
        getRiskList: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialwork9step/risk/manage/page/list`,
                method: 'post',
                data: data
            });
        },

        addRisk: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialwork9step/risk/manage/add`,
                method: 'post',
                data: data
            });
        },

        modRisk: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialwork9step/risk/manage/mod`,
                method: 'post',
                data: data
            });
        },

        delRisk: (data: any) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/specialwork9step/risk/manage/del`,
                method: 'get',
                params: data
            });
        }
    };
}

 src/views/specialWorkSystem/foundationSet/riskIdentify/component/riskDialog.vue

对比新文件
@@ -0,0 +1,132 @@
<template>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowVideoDialog" width="50%">
            <el-form :model="riskForm" size="default" ref="userRef" :rules="riskFormRules" label-width="120px">
                <el-form-item label="风险辨识内容:" prop="content">
                  <el-input v-model.trim="riskForm.content" placeholder="请输入风险辨识内容"  ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowVideoDialog = !isShowVideoDialog" size="default">取 消</el-button>
                    <el-button v-if="!isDisabled" type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { saftyApi } from '/@/api/systemManage/saftyManage';
import {riskApi} from "/@/api/systemManage/riskManage";

// 定义接口来定义对象的类型
interface DeptData {}
interface sexData {}
interface UserState {
    title: string;
    isDisabled: boolean;
    isShowVideoDialog: boolean;
    riskForm: {
      content: string | null;

    };
    riskFormRules:{

    },
}
interface TypeList {
  label: string,
  value: number
}
export default defineComponent({
    name: 'videoDialog',
    setup(props, context) {
        const userRef = ref()
        const state = reactive<UserState>({
            title: '',
            isDisabled: false,
            isShowVideoDialog: false,
            riskForm: {
              content: ''
            },
            riskFormRules:{
              content: [{ required: true, message: '请填写风险辨识内容', trigger: 'blur' }],
            },
        });
        // 打开弹窗
        const openDialog = (type: string, value: any, departmentList: [], roleList: [], dutyList:[]) => {
            state.isShowVideoDialog = true;
            if (type === '新增') {
                state.title = '新增风险辨识内容'
                state.isDisabled = false
                state.riskForm = {
                  content: ''
                };
            } else if(type === '编辑'){
                state.title = '编辑风险辨识内容';
                state.isDisabled = false
                state.riskForm = JSON.parse(JSON.stringify(value));
            }
        };

        // 新增修改
        const onSubmit = async () => {
            userRef.value.validate(async (valid:Boolean) => {
                if(valid){
                    if (state.title === '新增风险辨识内容') {
                        let res = await riskApi().addRisk(state.riskForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险辨识内容新增成功',
                                duration: 2000
                            });
                            state.isShowVideoDialog = false;
                            context.emit('getRiskList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        let res = await riskApi().modRisk(state.riskForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '风险辨识内容修改成功',
                                duration: 2000
                            });
                            state.isShowVideoDialog = false;
                            context.emit('getRiskList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                }else{
                    ElMessage({
                        type:'warning',
                        message:'请完善基本信息'
                    })
                }
            })

        };

        // 页面加载时
        onMounted(() => {});
        return {
            userRef,
            openDialog,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/specialWorkSystem/foundationSet/riskIdentify/index.vue

对比新文件
@@ -0,0 +1,164 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-button size="default" type="success" class="ml10" @click="onOpenRiskDialog('新增', '')">
          <el-icon>
            <ele-FolderAdd />
          </el-icon>
          新增
        </el-button>
      </div>
      <el-table :data="riskTableData.data" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center"/>
        <el-table-column prop="content" label="风险辨识内容" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onOpenRiskDialog('编辑', scope.row)">编辑</el-button>
            <el-button style="color: red" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="page-position" :pager-count="5"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="listQuery.pageIndex"
          background v-model:page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="riskTableData.total"> </el-pagination>
      <br />
      <br />
    </el-card>
    <riskDialog ref="riskRef" @getRiskList="initRiskTableData"/>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import riskDialog from "/@/views/specialWorkSystem/foundationSet/riskIdentify/component/riskDialog.vue";
import {riskApi} from "/@/api/systemManage/riskManage";

// 定义接口来定义对象的类型
interface TableDataRow {
  id: string;
  riskName: string;
}
interface TableDataState {
  riskTableData: {
    data: Array<TableDataRow>;
    total: number;
    loading: boolean;
  };
  listQuery: {
    pageIndex: number;
    pageSize: number;
  };
}

export default defineComponent({
  name: 'riskManage',
  components: { riskDialog },
  setup() {
    const riskRef = ref();
    const state = reactive<TableDataState>({
      riskTableData: {
        data: [],
        total: 0,
        loading: false,
      },
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
      },
    });
    // 初始化表格数据
    const initRiskTableData = async () => {
      let res = await riskApi().getRiskList(state.listQuery);
      if (res.data.code === '200') {
        state.riskTableData.data = res.data.data;
        state.riskTableData.total = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };


    // 打开新增修改用户弹窗
    const onOpenRiskDialog = (type: string, value: any) => {
      riskRef.value.openDialog(type, value);
    };

    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除该风险辨识内容，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(async () => {
            let res = await riskApi().delRisk({id: row.id});
            if (res.data.code === '200') {
              ElMessage({
                type: 'success',
                duration: 2000,
                message: '删除成功'
              });
              await initRiskTableData();
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          })
          .catch(() => {});
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.listQuery.pageSize = val;
      initRiskTableData();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.listQuery.pageIndex = val;
      initRiskTableData();
    };
    // 页面加载时
    onMounted(() => {
      let a = { name: 1, c: { name: 1 } };
      let b = Object.assign({}, a);
      b.c.name = 2;
      initRiskTableData();

    });
    return {
      riskRef,
      onOpenRiskDialog,
      onRowDel,
      onHandleSizeChange,
      initRiskTableData,
      onHandleCurrentChange,
      ...toRefs(state)
    };
  }
});
</script>
<style  scoped>
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: var(--el-card-bg-color);
  color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
  color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: var(--el-card-bg-color);
}
</style>