新增风险评估记录

zhouwx

2024-05-15 17d6a920c0f0b3a14db536fd1f7f5d3431cc048a

新增风险评估记录

 package.json

@@ -1,88 +1,89 @@
{
    "name": "vue-next-admin",
    "version": "2.1.1",
    "description": "vue3 vite next admin template",
    "author": "lyt_20201208",
    "license": "MIT",
    "scripts": {
        "dev": "vite --force",
        "build": "vite build",
        "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
    },
    "dependencies": {
        "@element-plus/icons-vue": "^2.0.6",
        "@kjgl77/datav-vue3": "^1.2.1",
        "@wangeditor/editor": "^5.1.14",
        "axios": "^0.27.2",
        "countup.js": "^2.2.0",
        "cropperjs": "^1.5.12",
        "echarts": "^5.3.3",
        "echarts-gl": "^2.0.9",
        "echarts-wordcloud": "^2.0.0",
        "element-plus": "^2.2.9",
        "js-base64": "^3.7.2",
        "js-cookie": "^3.0.1",
        "json-bigint": "^1.0.0",
        "jsplumb": "^2.15.6",
        "mitt": "^3.0.0",
        "nprogress": "^0.2.0",
        "pinia": "^2.0.14",
        "pinia-plugin-persistedstate": "^2.1.1",
        "print-js": "^1.6.0",
        "qrcodejs2-fixes": "^0.0.2",
        "screenfull": "^6.0.1",
        "sortablejs": "^1.15.0",
        "splitpanes": "^3.1.1",
        "vue": "^3.2.36",
        "vue-clipboard3": "^2.0.0",
        "vue-grid-layout": "^3.0.0-beta1",
        "vue-i18n": "^9.1.10",
        "vue-router": "^4.0.15",
        "wangeditor": "^4.7.15",
        "xlsx": "^0.18.5"
    },
    "devDependencies": {
        "@types/json-bigint": "^1.0.1",
        "@types/node": "^17.0.39",
        "@types/nprogress": "^0.2.0",
        "@types/sortablejs": "^1.13.0",
        "@typescript-eslint/eslint-plugin": "^5.27.0",
        "@typescript-eslint/parser": "^5.27.0",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue/compiler-sfc": "^3.2.36",
        "dotenv": "^16.0.1",
        "eslint": "^8.17.0",
        "eslint-plugin-vue": "^9.1.0",
        "prettier": "^2.6.2",
        "sass": "^1.52.2",
        "sass-loader": "^13.0.0",
        "typescript": "^4.7.3",
        "vite": "^2.9.9",
        "vue-eslint-parser": "^9.0.2"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ],
    "bugs": {
        "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
    },
    "engines": {
        "node": ">=12.0.0",
        "npm": ">= 6.0.0"
    },
    "keywords": [
        "vue",
        "vue3",
        "vuejs/vue-next",
        "element-ui",
        "element-plus",
        "vue-next-admin",
        "next-admin"
    ],
    "repository": {
        "type": "git",
        "url": "https://gitee.com/lyt-top/vue-next-admin.git"
    }
  "name": "vue-next-admin",
  "version": "2.1.1",
  "description": "vue3 vite next admin template",
  "author": "lyt_20201208",
  "license": "MIT",
  "scripts": {
    "dev": "vite --force",
    "build": "vite build",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.6",
    "@kjgl77/datav-vue3": "^1.2.1",
    "@wangeditor/editor": "^5.1.14",
    "axios": "^0.27.2",
    "countup.js": "^2.2.0",
    "cropperjs": "^1.5.12",
    "echarts": "^5.3.3",
    "echarts-gl": "^2.0.9",
    "echarts-wordcloud": "^2.0.0",
    "element-plus": "^2.2.9",
    "js-base64": "^3.7.2",
    "js-cookie": "^3.0.1",
    "json-bigint": "^1.0.0",
    "jsplumb": "^2.15.6",
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.14",
    "pinia-plugin-persistedstate": "^2.1.1",
    "print-js": "^1.6.0",
    "qrcodejs2-fixes": "^0.0.2",
    "screenfull": "^6.0.1",
    "sortablejs": "^1.15.0",
    "splitpanes": "^3.1.1",
    "vue": "^3.2.36",
    "vue-clipboard3": "^2.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.10",
    "vue-router": "^4.0.15",
    "vue3-json-excel": "^1.0.10-alpha",
    "wangeditor": "^4.7.15",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@types/json-bigint": "^1.0.1",
    "@types/node": "^17.0.39",
    "@types/nprogress": "^0.2.0",
    "@types/sortablejs": "^1.13.0",
    "@typescript-eslint/eslint-plugin": "^5.27.0",
    "@typescript-eslint/parser": "^5.27.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/compiler-sfc": "^3.2.36",
    "dotenv": "^16.0.1",
    "eslint": "^8.17.0",
    "eslint-plugin-vue": "^9.1.0",
    "prettier": "^2.6.2",
    "sass": "^1.52.2",
    "sass-loader": "^13.0.0",
    "typescript": "^4.7.3",
    "vite": "^2.9.9",
    "vue-eslint-parser": "^9.0.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "bugs": {
    "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
  },
  "engines": {
    "node": ">=12.0.0",
    "npm": ">= 6.0.0"
  },
  "keywords": [
    "vue",
    "vue3",
    "vuejs/vue-next",
    "element-ui",
    "element-plus",
    "vue-next-admin",
    "next-admin"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/lyt-top/vue-next-admin.git"
  }
}

 public/static/example.xls

Binary files differ

 src/api/analyse/record/index.ts

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

export function recordApi() {
    return {
        getRecordList: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/select/getOldRiskAssessPage',
                method: 'post',
                data: params
            });
        },
        modRecord: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/update/updateOldRiskAssess',
                method: 'post',
                data: params
            });
        },
        addRecord: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/insert/insertOldRiskAssess',
                method: 'post',
                data: params
            });
        },
        deleteRecordById: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/delete/deleteOldRiskAssess',
                method: 'post',
                data: params
            });
        },
        addFile: (params: object) => {
            return request({
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                url: import.meta.env.VITE_API_URL + '/basic/insert/importOldRiskAssess',
                method: 'post',
                data: params
            });
        },
        exportFile: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + '/basic/select/exportOldRiskAssess',
                method: 'post',
                data: params
            });
        },
    };
}

 src/main.ts

@@ -14,6 +14,7 @@
import VueGridLayout from 'vue-grid-layout';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import DataVVue3 from '@kjgl77/datav-vue3'
import vue3JsonExcel from 'vue3-json-excel'
// import 'lib-flexible/flexible'
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
@@ -22,6 +23,6 @@
directive(app);
other.elSvg(app);

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

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

 src/views/analyse/record/components/recordDialog.vue

对比新文件
@@ -0,0 +1,279 @@
<template>
    <div class="system-menu-dialog-container">
        <el-dialog :title="recordDialogState.title" v-model="recordDialogState.recordDialogVisible" width="600px">
            <el-form ref="recordFormRef" :rules="recordDialogState.recordFormRules" :model="recordDialogState.recordForm" size="default" label-width="135px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="区域" prop="region">
                          <el-input v-model="recordDialogState.recordForm.region" :disabled="recordDialogState.disabled" ></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="potentialAccident">
                        <el-input type="textarea" v-model="recordDialogState.recordForm.potentialAccident" :disabled="recordDialogState.disabled" ></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="dangerReason">
                        <el-input v-model="recordDialogState.recordForm.dangerReason" :disabled="recordDialogState.disabled" ></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="triggerFactor">
                        <el-input type="textarea" v-model="recordDialogState.recordForm.triggerFactor" :disabled="recordDialogState.disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect">
                      <el-form-item label="事故后果" prop="accidentResult">
                        <el-input v-model="recordDialogState.recordForm.accidentResult" :disabled="recordDialogState.disabled" ></el-input>
                      </el-form-item>
                    </el-col>
                  <el-row :gutter="22">
                    <el-col :span="11" class="mb20 ml18 ">
                      <el-form-item label="L" prop="l">
                        <el-input v-model="recordDialogState.recordForm.l" :disabled="recordDialogState.disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11" class="mb20 ">
                      <el-form-item label="E" prop="e">
                        <el-input v-model="recordDialogState.recordForm.e" :disabled="recordDialogState.disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="22">
                    <el-col :span="11" class="mb20 ml18 ">
                      <el-form-item label="C" prop="c">
                        <el-input v-model="recordDialogState.recordForm.c" :disabled="recordDialogState.disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11" class="mb20 ">
                      <el-form-item label="D" prop="d">
                        <el-input v-model="recordDialogState.recordForm.d" :disabled="recordDialogState.disabled" ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 ">
                    <el-form-item label="危险等级" prop="dangerLevel">
                      <el-select style="width: 100%" :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.dangerLevel" clearable>
                        <el-option v-for="item in recordDialogState.dangerTypeList" :key="item.id" :label="item.name" :value="item.name"></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="controlMeasure">
                      <el-input type="textarea" v-model="recordDialogState.recordForm.controlMeasure" :disabled="recordDialogState.disabled" placeholder="现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20 valueSelect" >
                    <el-form-item label="管控层级" prop="controlLevel">
                      <el-select style="width: 100%" multiple :disabled="recordDialogState.disabled" v-model="recordDialogState.recordForm.controlLevel" clearable>
                        <el-option v-for="item in recordDialogState.manageLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="recordDialogState.recordDialogVisible = !recordDialogState.recordDialogVisible" size="default">取 消</el-button>
                <el-button v-if="!recordDialogState.disabled" type="primary" @click="onSubmitPlan" size="default">确定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

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

const recordFormRef = ref()

const recordDialogState = reactive<RecordDialogType>({
    title: '',
    disabled: false,
    recordDialogVisible: false,
    recordForm: {
        id:null,
        region:'',
        potentialAccident: '',
        dangerReason: '',
        triggerFactor: '',
        accidentResult: '',
        l: null,
        e: null,
        c: null,
        d: null,
        dangerLevel: null,
        controlMeasure: '',
        controlLevel: [],
    },
  recordFormRules: {
        region: [{ required: true, message: '请输入区域', trigger: 'change' }],
        potentialAccident: [{ required: true, message: '请输入潜在事故', trigger: 'blur' }],
        dangerReason: [{ required: true, message: '请输入危险、有害因素', trigger: 'blur' }],
        triggerFactor: [{ required: true, message: '请输入触发条件', trigger: 'change' }],
        accidentResult: [{ required: true, message: '请输入事故后果', trigger: 'change' }],
        l: [{ required: true, message: '请输入L', trigger: 'change' }],
        e: [{ required: true, message: '请输入E', trigger: 'change' }],
        c: [{ required: true, message: '请输入C', trigger: 'change' }],
        d: [{ required: true, message: '请输入D', trigger: 'change' }],
        dangerLevel: [{ required: true, message: '请选择评危险等级', trigger: 'change' }],
        controlMeasure: [{ required: true, message: '请输入现有安全控制措施', trigger: 'change' }],
        controlLevel: [{ required: true, message: '请选择管理层级', trigger: 'change' }],

    },
  dangerTypeList: [
    {id: 1, name: '低风险'},
    {id: 2, name: '一般风险'},
    {id: 3, name: '较大风险'},
  ],
  manageLevelList: [
    {id: 1, name: '公司级'},
    {id: 2, name: '部门级'},
    {id: 3, name: '岗位级'},
  ]
})

const showRecordDialog = (title: string, value: any) => {
  recordDialogState.recordDialogVisible = true;

  recordDialogState.disabled = false
    setTimeout(() => {
      recordFormRef.value.clearValidate();
    });
    if(title === '新增'){
        recordDialogState.title = '新增';
        recordDialogState.recordForm = {
          region:'',
          potentialAccident: '',
          dangerReason: '',
          triggerFactor: '',
          accidentResult: '',
          l: null,
          e: null,
          c: null,
          d: null,
          dangerLevel: null,
          controlMeasure: '',
          controlLevel: [],
        };
    }else if(title === '查看' || title === '编辑') {
      for (let i in recordDialogState.recordForm) {
        if (isValidKey(i, recordDialogState.recordForm)) {
          if (i === 'controlLevel') {
            let arr = []
            arr = value[i].split('\n')
            recordDialogState.recordForm[i] = arr
          } else {
            recordDialogState.recordForm[i] = value[i]
          }
        }
      }
      if (title === '查看') {
        recordDialogState.title = '查看';
        recordDialogState.disabled = true
      } else {
        recordDialogState.title = '编辑';
        recordDialogState.recordForm.id = value.id
      }
    }

};

const onSubmitPlan = () => {
  recordFormRef.value.validate(async(valid: boolean) => {
        if(valid){
          recordDialogState.recordForm.controlLevel = recordDialogState.recordForm.controlLevel.join('\n')
            if(recordDialogState.title === '新增'){
                let res = await recordApi().addRecord(recordDialogState.recordForm);
                if(res.data.code === 100){
                    emit('getList')
                    recordDialogState.recordDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '新增成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }else{

                let res = await recordApi().modRecord(recordDialogState.recordForm)
                if(res.data.code === 100){
                    emit('getList')
                    recordDialogState.recordDialogVisible = false;
                    ElMessage({
                        type: 'success',
                        message: '编辑成功'
                    })
                }else{
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg,
                    });
                }
            }
        }else{
            ElMessage({
                type: 'warning',
                message: '请完善基本信息',
            });
        }
    })
}

const emit = defineEmits(['getList'])

defineExpose({
  showRecordDialog
})
</script>

<style lang="scss" scoped>
    ::v-deep(.pickTime){
      position: absolute !important;
      top: 0 !important;
    }
    .valueSelect{
      ::v-deep(.el-popper){
        .el-select-dropdown__item{
          width: 100%;
          height: auto;
          white-space: normal;
          word-break: break-all;
          word-wrap: break-word;
          overflow: auto;
          padding: 10px 25px;
          border-bottom: 1px solid #ccc;

          .valueTable{
            &>div{
              line-height: 1.5;
              margin-bottom: 6px;
              display: flex;
              align-items: center;

              div{
                color: #999;
              }

              span{
                font-weight: bolder;
              }

              &:last-of-type{
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
</style>

 src/views/analyse/record/index.ts

对比新文件
@@ -0,0 +1,64 @@
declare interface RecordStateType {
    recordData: Array<RecordType>
    searchQuery: {
        pageIndex: number,
        pageSize: number,
        region: string,
        dangerLevel: string,
        controlLevel: string
    }
    dangerTypeList: Type []
    manageLevelList: Type []
    total: number
    tagBg: Array<string>
    fileList: Array<object>
    uploadUrl: string
    header: object
    visible: boolean
    expertData: Array<object>
}

declare interface RecordType {
    id: number | null,
    area: string | null,
    accident: string | null,
    danger: string | null,
    condition: string | null,
    result: string | null,
    l: number | null,
    e: number | null,
    c: number | null,
    d: number | null,
    dangerType: number | null,
    safetyMeasures: string | null,
    manageLevel: Array<string>,
}

declare interface Type {
    id: number,
    name: string,
}
declare interface RecordDialogType {
    title: string,
    disabled: boolean,
    recordDialogVisible: boolean,
    recordForm: {
        id?: number | null,
        region: string | null,
        potentialAccident: string | null,
        dangerReason: string | null,
        triggerFactor: string | null,
        accidentResult: string | null,
        l: number | null,
        e: number | null,
        c: number | null,
        d: number | null,
        dangerLevel: null,
        controlMeasure: string,
        controlLevel: string,
    },
    recordFormRules: {},
    dangerTypeList: Type [],
    manageLevelList: Type []
}


 src/views/analyse/record/index.vue

对比新文件
@@ -0,0 +1,457 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>区域：</span>
                    <el-input v-model="recordState.searchQuery.region" clearable filterable class="input-box" placeholder="区域">
                    </el-input>
                </div>
                <div class="basic-line">
                    <span>危险等级：</span>
                    <el-select v-model="recordState.searchQuery.dangerLevel" clearable filterable class="input-box" placeholder="危险等级">
                        <el-option v-for="item in recordState.dangerTypeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </div>
              <div class="basic-line">
                <span>管理层级：</span>
                <el-select v-model="recordState.searchQuery.controlLevel"  filterable class="input-box" placeholder="管理层级">
                  <el-option v-for="item in recordState.manageLevelList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getAssessData">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <div class="cardTop">
                        <el-button type="primary" :icon="Plus" size="default" @click="openRecordDialog('新增', {})">新增</el-button>
                        <div style="display: flex">
                          <el-button  type="primary" :icon="Upload" size="default" @click="recordState.visible = true" style="margin-right: 10px">导入</el-button>
                          <vue3-json-excel
                              :json-data="recordState.expertData"
                              :fields="fields"
                              name="风险评价记录.xls"
                          >
                            <el-button  type="primary" :icon="Download" size="default">导出</el-button>
                          </vue3-json-excel>
                        </div>
                    </div>
                    <el-table ref="multipleTableRef" :border="true" :data="recordState.recordData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column type="index" label="序号" align="center" width="60" />
                        <el-table-column prop="region" label="区域" align="center"/>
                        <el-table-column prop="potentialAccident" label="潜在事故" align="center" width="180"/>
                        <el-table-column prop="dangerReason" label="危险、有害因素" align="center"/>
                        <el-table-column prop="triggerFactor" label="触发条件" align="center" width="180"/>
                        <el-table-column prop="accidentResult" label="事故后果" align="center"/>
                        <el-table-column prop="l" label="L" width="60" align="center"/>
                        <el-table-column prop="e" label="E" width="60" align="center"/>
                        <el-table-column prop="c" label="C" width="60" align="center"/>
                        <el-table-column prop="d" label="D" width="60" align="center"/>
                        <el-table-column  label="危险等级" align="center">
                          <template #default="scope">
                            <el-tag :class="recordState.tagBg[scope.row.dangerType - 1]" style="color:#383838;">
                              {{scope.row.dangerLevel}}
                            </el-tag>

                          </template>
                        </el-table-column>
                        <el-table-column prop="controlMeasure" label="现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）" width="220" align="center"/>
                        <el-table-column prop="controlLevel" label="管控层级（公司级、部门级、岗位即）" width="160" align="center"/>
                        <el-table-column label="操作" width="150" fixed="right">
                            <template #default="scope">
                                <el-button size="small"  text type="primary"  @click="openRecordDialog('编辑', scope.row)">编辑</el-button>
                                <el-button size="small"  text type="primary"  @click="openRecordDialog('查看',scope.row)">查看</el-button>
                                <el-button size="small"  text type="primary" style="color: red"  @click="del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="recordState.searchQuery.pageIndex" background v-model:page-size="recordState.searchQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordState.total" class="page-position"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>
      <record-dialog ref="recordDialogRef" @getList="getAssessData"></record-dialog>
      <el-dialog v-model="recordState.visible" title="导入风险评估记录" @close="close" width="450px">
        <el-form label-width="135px">
          <el-form-item label="评估记录表格模板" >
            <el-button @click="downloadFile" size="default" :icon="Download" type="primary">下载模板</el-button>
          </el-form-item>
          <el-form-item label="评估记录表格文件">
            <el-upload
                accept=".xlsx,.xls"
                :before-upload="beforeUpload"
                v-model:file-list="recordState.fileList"
                action="#"
                :auto-upload="false"
                :on-change="handleChange"
                >
              <el-button :icon="Upload" size="default" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
              <span class="dialog-footer">
                <el-button @click="close" size="default">取 消</el-button>
                <el-button  type="primary" @click="onUpload" size="default">确定</el-button>
              </span>
        </template>
      </el-dialog>

    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import { Plus, Upload, Download} from '@element-plus/icons-vue';
import recordDialog from './components/recordDialog.vue'
import Cookies from "js-cookie";
import {recordApi} from "/@/api/analyse/record";


const recordDialogRef = ref();
const recordState = reactive<RecordStateType>({
    recordData: [],
    searchQuery: {
        pageIndex: 1,
        pageSize: 10,
        region: '',
        dangerLevel: '',
        controlLevel: ''

    },
    total: 0,
  dangerTypeList: [
        {id: 1, name: '低风险'},
        {id: 2, name: '一般风险'},
        {id: 3, name: '较大风险'},
    ],
    manageLevelList: [
      {id: 1, name: '公司级'},
      {id: 2, name: '部门级'},
      {id: 3, name: '岗位级'},
    ],
  tagBg: ['blue', 'yellow', 'orange', ],
  fileList: [],
  uploadUrl: import.meta.env.VITE_API_URL + '/manage/accessory-file/uploadFile',
  header: {
    Authorization: Cookies.get('token')
  },
  visible: false,
  expertData: []
})

const fields = ref({
  '序号':'id',
  '区域':'region',
  '潜在事故':'potentialAccident',
  '危险、有害因素':'dangerReason',
  '触发条件':'triggerFactor',
  '事故后果':'accidentResult',
  'L':'l',
  'E':'e',
  'C':'c',
  'D':'d',
  '危险等级':'dangerLevel',
  '现有安全控制措施（工程技术、管理、培训教育、个体防护、应急处置）':'controlMeasure',
  '管控层级（公司级、部门级、岗位级）':'controlLevel',
});



const getAssessData = async () => {
    let res = await recordApi().getRecordList(recordState.searchQuery);
    if(res.data.code === 100){
      recordState.recordData = res.data.data.map(item => {
        return {
          ...item,
          dangerType: item.dangerLevel === '低风险' ? 1: item.dangerLevel === '一般风险'? 2: item.dangerLevel === '较大风险' ? 3:""
        }
      });
      recordState.total = res.data.total;
    }else{
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
   await getAllData()
};

const getAllData = async () => {
  let res = await recordApi().exportFile(recordState.searchQuery);
  if(res.data.code === 100){
    recordState.expertData = res.data.data
  }else{
    ElMessage({
      type: 'warning',
      message: res.data.msg
    });
  }
};

const openRecordDialog = (title: string,value: any) =>{
  recordDialogRef.value.showRecordDialog(title, value);
}


const onHandleSizeChange = (val: number) => {
    recordState.searchQuery.pageSize = val;
    getAssessData();
};

const onHandleCurrentChange = (val: number) => {
    recordState.searchQuery.pageIndex = val;
    getAssessData();
};

const reset = () => {
    recordState.searchQuery = {
        pageIndex: 1,
        pageSize: 10,
        region: '',
        dangerLevel: '',
        controlLevel: ''
    }
    getAssessData();
};
const fileBinaryList = ref([])

const handleChange = (file, files) => {
  // file是当前上传的文件，files是当前所有的文件，
  fileBinaryList.value = files;
};
const onUpload = async () => {
  if(recordState.fileList.length == 0){
    ElMessage({
        type: 'warning',
        message: '请先上传表格'
    });
    return
  }else{
    const formData = new FormData();
    fileBinaryList.value.forEach((file) => {
      formData.append('file', file.raw)
    })
    console.log('form',formData)
    const res = await recordApi().addFile(formData)
    if(res.data.code == 100){
      recordState.fileList = []
      recordState.visible = false
      await getAssessData()
    }else{
      ElMessage({
        type: 'error',
        message: res.data.msg
      });
    }
  }
}
const beforeUpload = (file) => {
  recordState.fileList = [...recordState.fileList, file]
  recordState.fileList = recordState.fileList.slice(-1)
  return false;
}
const close = () => {
  recordState.fileList = []
  recordState.visible = false
}
const downloadFile = () => {
  const filePath = '/static/example.xls';
  const link = document.createElement('a');
  link.href = filePath;
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}
const del = (val) => {
  ElMessageBox.confirm(`此操作将删除该记录，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(async () => {
        let res = await recordApi().deleteRecordById({ id: val.id });
        if (res.data.code === 100) {
          ElMessage({
            type: 'success',
            duration: 2000,
            message: '删除成功'
          });
          await getAssessData();
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })
      .catch((error) => {
      });
}
onMounted(() => {
    getAssessData()
})

</script>

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

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

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

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

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

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

:deep(.el-date-editor) {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
//:deep(.el-input.is-disabled .el-input__wrapper) {
//    background-color: var(--el-card-bg-color);
//    box-shadow: none;
//}
.red {
  background: rgba(255,0,0,0.6);
}
.orange {
  background: rgba(248,82,8,0.6);
}
.yellow {
  background: rgba(247,255,0,0.6);
}
.blue {
  background: rgba(0,112,192,0.6);
}
</style>