web:1 风险分级管控-危险源告知,区域包保页面提交 2 table组件,权限自定义指令功能提交

unknown

2023-09-28 dd16a1237f53697f0df291b5af1ad39062ce6039

web:1 风险分级管控-危险源告知,区域包保页面提交 2 table组件,权限自定义指令功能提交

 web/package-lock.json

@@ -1932,63 +1932,6 @@
          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -1996,28 +1939,6 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -12830,6 +12751,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-router": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",

 web/src/api/modules/safety.js

@@ -207,4 +207,32 @@
  // 信息删除
  deletePunishInfo: params =>
    axios.post('/secure/encourage/encourageDel', params),

  /**
  * 风险分级管控
  */
  RiskGrad: {
    // 危险源告知
    warning : {
      getLists: params =>
        axios.post('/secure/regionHazardInform/findAll', params),
      insert: params =>
        axios.post('/secure/regionHazardInform/insert', params),
      update: params =>
        axios.post('/secure/regionHazardInform/update', params),
      delete: params =>
        axios.get('/secure/regionHazardInform/delete', { params }),
    },
    // 区域包保
    allocation : {
      getLists: params =>
        axios.post('/secure/tRegionWarranty/findAll', params),
      insert: params =>
        axios.post('/secure/tRegionWarranty/insert', params),
      update: params =>
        axios.post('/secure/tRegionWarranty/update', params),
      delete: params =>
        axios.get('/secure/tRegionWarranty/delete', { params }),
    }
  }
}

 web/src/components/element/Pagination.vue

对比新文件
@@ -0,0 +1,78 @@
<template>
  <div class="pagination-container">
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30]"
      :total="total" :current-page="pageNum" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>
<script>
export default {
  name: "pagination",
  data() {
    return {};
  },
  props: {
    // 总页数
    total: {
      type: Number,
    },
    // 当前页
    pageNum: {
      type: Number,
    },
    // 每页显示条数
    pageSize: {
      type: Number,
    },
  },
  methods: {
    // 当前页码变化
    handleCurrentChange(val) {
      this.$emit("change-page-num", val);
    },
    //  每页查看条数变化
    handleSizeChange(val) {
      this.$emit("change-page-size", val);
    },
  },
  // watch: {
  //   pageSize: {
  //     // immediate: true,
  //     handler(newValue, oldValue) {
  //       this.page._pageSize = this.newValue;
  //       console.log("pageSize", newValue, oldValue);
  //     },
  //   },
  //   pageNum: {
  //     // immediate: true,
  //     handler(newValue, oldValue) {
  //       this.page._currentPage = newValue;
  //       console.log("pageNum", newValue, oldValue);
  //     },
  //   },
  // },
};
</script>
<style lang="scss" scoped>
// 主体底部样式
::v-deep.el-pagination .btn-prev,
::v-deep.el-pagination .btn-next,
::v-deep.el-pagination .el-pager li {
  background-color: rgba(20, 25, 58, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 400;
  color: #E2E4E9;
  border-radius: 4px;
}

::v-deep.el-pagination .el-pager li:not(.disabled).active {
  color: #fff;
  border: 1px solid #39B5FE;
  background-color: #0B3562;
  font-weight: 400;
}

.pagination-container {
  margin-top: 30px;
}
</style>

 web/src/components/element/Table.vue

对比新文件
@@ -0,0 +1,151 @@
<template>
  <div>
    <!-- elTable -->
    <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="rowClick"
      @row-dblclick="rowDblClick" @selection-change="handleSelectionChange" border stripe>
      <template v-for="(col, index) in tableColumns">
        <!-- 选择框 -->
        <el-table-column v-if="col.selection" :key="`selection${index}`" width="50" type="selection" align="center">
        </el-table-column>

        <!-- 序号 -->
        <el-table-column v-else-if="col.index" :key="`index${index}`" width="50" :label="col.name || '序号'" type="index"
          align="center">
        </el-table-column>

        <!-- 操作 -->
        <el-table-column v-else-if="col.operation" :key="`operation${col.name}`" :width="col.width" :label="col.name"
          align="center">
          <template #default="{ row }">
            <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''" :icon="subCol.icon || ''"
              v-permission="subCol.permission || ''" @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">
              {{ subCol.name }}
            </el-button>
          </template>
        </el-table-column>

        <!-- 常规col -->
        <el-table-column v-else :key="col.name" :width="col.width" :label="col.name" :prop="col.key"
          :show-overflow-tooltip="col.showOverflowTip || false" :align="col.align || 'center'">
          <template #default="{ row }">
            <!-- slotのcol -->
            <template v-if="col.slot">
              <slot :name="col.slot" :row="row"></slot>
            </template>
            <!-- 需处理数据のcol -->
            <template v-else-if="col.formatter">
              {{ col.formatter(row) }}
            </template>
            <!-- 普通のcol -->
            <template v-else>
              {{ row[col.key] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页组件 -->
    <cPagination :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize" @change-page-num="changePageNum"
      @change-page-size="changePageSize" />
  </div>
</template>
<script>
import cPagination from "./Pagination"
export default {
  name: "cTable",
  data() {
    return {
      time: null,
      emptyFn: () => { }
    };
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    tableHeight: {
      type: Number,
      default: null
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableRef: {
      type: String,
      default: "multipleTable"
    },
    tableSize: {
      type: String,
      default: "mini"
    },
    tableColumns: {
      type: Array,
      default() {
        return [];
      }
    },
    pageTotal: {
      type: Number
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageChange: {
      type: Function,
      default: () => { }
    },
    handleSelection: {
      type: Function,
      default: () => { }
    }
  },
  components: {
    cPagination
  },
  methods: {
    changePageNum(val) {
      // console.log(val)
      // this.pageNum = val
      this.$emit("update:pageNum", val);
      this.pageChange();
    },
    changePageSize(val) {
      this.$emit("update:pageSize", val);
      if (val * (this.pageNum - 1) <= this.pageTotal) {
        this.pageChange();
      }
    },
    // 单击
    rowClick() {
      // this.time && clearTimeout(this.time);
      // this.time = setTimeout(() => {
      //   this.$refs[this.tableRef].toggleRowSelection(row);
      // }, 200);
    },
    // 双击
    rowDblClick() {
      // this.time && clearTimeout(this.time);
    },
    clearSelection() {
      this.$refs[this.tableRef].clearSelection();
    },
    handleSelectionChange(val) {
      this.handleSelection(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  border: none;
}
</style>

 web/src/main.js

@@ -7,6 +7,7 @@
// import './style/element-variables.scss'
import "@/style/font/font.scss";
import './plugins/index'; // 引入挂载的vue实例方法文件
import './plugins/directive' // 全局指令:按钮权限
import { createPinia, PiniaVuePlugin } from 'pinia';
import './router/routerConfig'; // 引入路由守卫
import App from './App.vue';

 web/src/plugins/directive.js

对比新文件
@@ -0,0 +1,13 @@
import Vue from 'vue'
import { buttonPinia } from '@/pinia/index'

Vue.directive('permission', {
  inserted: (el, binding) => {
    const { value } = binding
    const pinia = buttonPinia()
    const piniaBtns = pinia.$state.buttonInfo
    if (value && !piniaBtns.includes(value)) {
      el.parentNode.removeChild(el)
    }
  }
})

 web/src/router/routerConfig.js

@@ -67,9 +67,11 @@
        let list = res.data.map(item => item.buttonHtmlId)
        pinia.changeMenuButtonInfo(list);
      }
      next()
    })
  } else {
    next()
  }
  next();
})

router.afterEach(() => {

 web/src/style/layout-main.scss

@@ -81,7 +81,7 @@
    }
  }

  .search_btn {
  ::v-deep .search_btn {
    border: 0 none;
    color: #fff;
    background: url('~@/assets/search_bg.png') no-repeat;
@@ -91,7 +91,7 @@
    }
  }

  .table_btn {
  ::v-deep .table_btn {
    border: 0 none;
    color: #39B5FE;
    background: url('~@/assets/table_btn.png') no-repeat;
@@ -101,7 +101,7 @@
    }
  }

  .delete_btn {
  ::v-deep .delete_btn {
    border: 0 none;
    color: #F94550;
    background: url('~@/assets/error_btn.png') no-repeat;

 web/src/views/ProjectManage/ProjectsIndex.vue

@@ -4,7 +4,7 @@
    <!-- header-->
    <div class="main_header" style="flex-direction: row-reverse;">
      <div class="header_item" style="margin-right:0px">
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="addRow">新增</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
      </div>
    </div>
    <!-- content-->
@@ -66,9 +66,8 @@
        <el-table-column prop="planOutput" label="总需求（环）" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template #default="scope">
            <el-button class="table_btn" size="mini" v-if="showButton('stop')"
              @click="deleteRow(scope.row)">停用</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('update')"
            <el-button class="table_btn" size="mini" v-permission="'stop'" @click="deleteRow(scope.row)">停用</el-button>
            <el-button class="delete_btn" size="mini" v-permission="'update'"
              @click="updateRow(scope.$index)">修改</el-button>
          </template>
        </el-table-column>
@@ -186,9 +185,8 @@
</template>

<script>
import {buttonPinia} from '../../pinia/index';
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
import cpnTable from '@/components/table/Table'
import cpnTable from '@/components/element/Table'
export default {
  data() {
    return {
@@ -433,11 +431,6 @@
        }
      })
    }, 1000),
    // 判断按钮权限信息
    showButton(str) {
      const pinia = buttonPinia();
      return pinia.$state.buttonInfo.includes(str);
    },
    changePageNum(page) {
      this.queryInfo.pageNum = page;
      this.getLists();
@@ -466,7 +459,6 @@
          if (!detailData.tableColumns.length) {
            detailData.tableColumns = [
              {index: true},
              {slot: "name"},
              {name: "环号", key: "ringNum"},
              {name: "管片编号", key: "pipeNum", width: 140},
              {name: "转向", key: "turnName", width: 106},

 web/src/views/ProjectManage/SectionManage.vue

@@ -14,24 +14,17 @@
        </el-select>
      </div>
      <div class="header_item">
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="queryReset">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="addRow">新增</el-button>
        <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
      </div>
    </div>
    <div class="main_content">
      <cpnTable :table-index="true" :table-data="dataList" :table-columns-config="tableColumns" :page-total="total"
      <cpnTable :table-index="true" :table-data="dataList" :table-columns="tableColumns" :page-total="total"
        :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
        <el-table-column slot="finished" label="已完成（块）" align="center">
          <template #default="{ row }">

        <template #finished="{ row }">
            <div style="cursor: pointer;" @click="showDetail(row)">{{ row.completedQuantity }}</div>
          </template>
        </el-table-column>
        <el-table-column slot="action" label="操作" width="140" align="center">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateRow(row)">修改</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteRow(row)">删除</el-button>
          </template>
        </el-table-column>
      </cpnTable>
    </div>
    <!-- dialog -->
@@ -105,7 +98,7 @@
          </template>
        </div>
      </el-card>
      <cpnTable :table-index="true" :table-data="detail.tableData" :table-columns-config="detail.tableColumns"
      <cpnTable :table-index="true" :table-data="detail.tableData" :table-columns="detail.tableColumns"
        :page-total="detail.total" :page-num.sync="detail.pageNum" :page-size.sync="detail.pageSize"
        :page-change="detailPageChange">
      </cpnTable>
@@ -114,9 +107,8 @@
</template>

<script>
import {buttonPinia} from '../../pinia/index';
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
import cpnTable from '@/components/table/Table'
import cpnTable from '@/components/element/Table'
export default {
  data() {
    return {
@@ -206,11 +198,11 @@
    cpnTable
  },
  computed: {
    dialogTitle() {
      return this.submitMode === 'update' ? '修改新增单位工程' : '新增单位工程'
    },
    isUpdate() {
      return this.submitMode === 'update'
    },
    dialogTitle() {
      return this.isUpdate ? '修改新增单位工程' : '新增单位工程'
    },
  },
  created() {
@@ -222,6 +214,7 @@
    // this.getAllBlocks() // 暂时没用,先屏蔽
  },
  methods: {
    // 获取table列表数据
    getLists() {
      this.loading = true
      let params = this.queryInfo
@@ -282,6 +275,7 @@
        }
      })
    },
    // 已完成 table信息
    getDetailLists() {
      let detailData = this.detail
      this.$api.DuctpiecePLM.searchDuctpiecePLMList({
@@ -295,6 +289,7 @@
        }
      })
    },
    // 已完成 title信息
    getDetailInfos(id) {
      this.$api.Engineer.detailsProjects({proId: id}).then(res => {
        if (res.success) {
@@ -302,6 +297,7 @@
        }
      })
    },
    // 初始化 ruleform
    setFormProps(options = {}) {
      let _form = {
        proId: '', // 项目名称id
@@ -317,10 +313,11 @@
      }
      this.ruleForm = Object.keys(options).length ? options : _form
    },
    // 初始化 table 配置
    setTableColumn() {
      this.tableColumns = [
        {index: true},
        {slot: "finished"},
        {slot: "finished", name: "已完成（块）"},
        {name: "项目名称", key: "proName", width: 160},
        {name: "起讫里程", key: "mileage"},
        {name: "单位工程名称", key: "unitProjectName"},
@@ -330,11 +327,15 @@
        {name: "工期", key: "duration"},
        {name: "站点", key: "station"},
        {name: "负责人", key: "realName"},
        {slot: 'action'},
        {
          operation: true, name: "操作", width: 140, value: [
            {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
            {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
          ]
        },
      ]
      this.detail.tableColumns = [
        {index: true},
        {slot: "name"},
        {name: "环号", key: "ringNum"},
        {name: "管片编号", key: "pipeNum", width: 140},
        {name: "转向", key: "turnName", width: 106},
@@ -350,13 +351,16 @@
        {name: "质量标注", key: "checkResultStr"},
      ]
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 显示表单
    showForm() {
      !this.isRender && (this.isRender = true)
      this.asyncVisible = true
    },
    // 隐藏表单
    closeForm() {
      this.asyncVisible = false
      this.resetForm('ruleForm')
@@ -368,10 +372,12 @@
      this.queryInfo.pageSize = 10
      this.getLists()
    },
    // 添加数据
    addRow() {
      this.submitMode = 'add'
      this.showForm()
    },
    // 更新数据
    async updateRow(row) {
      this.submitMode = 'update'
      this.showForm()
@@ -384,6 +390,7 @@
      this.ruleForm.segmentId = row.segmentId
      this.ruleForm.segmentList = segmentList
    },
    // 删除数据
    deleteRow(row) {
      this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
        confirmButtonText: "确定",
@@ -433,6 +440,7 @@
        }
      })
    },
    // 提交表单
    onSubmit: throttle(function () {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return
@@ -462,11 +470,6 @@
        }
      })
    }, 1000),
    // 判断按钮权限信息
    showButton(str) {
      const pinia = buttonPinia();
      return pinia.$state.buttonInfo.includes(str);
    },
    showDetail(row) {
      let detailData = this.detail
      !detailData.isRenderDetail && (detailData.isRenderDetail = true)
@@ -478,9 +481,11 @@
      this.getDetailInfos(row.proId)
      this.getDetailLists()
    },
    // 分页改变
    pageChange() {
      this.getLists();
    },
    // 已完成の分页改变
    detailPageChange() {
      this.getDetailLists();
    },

 web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue

@@ -1,3 +1,375 @@
<template>
    <div>区域包保</div>
    <!-- 安全管理 ==> 风险分级管控 => 区域包保-->
    <div class="main">
        <!-- header -->
        <div class="main_header">
            <div class="header_item">
                <span class="header_label">区域名称：</span>
                <el-select v-model="queryInfo.regionHazardInformId" clearable placeholder="请选择域名称">
                    <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="header_item">
                <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
                <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
            </div>
        </div>

        <!-- table -->
        <div class="main_content">
            <cpnTable :table-index="true" :table-data="dataList" :table-columns="tableColumns" :page-total="total"
                :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
            </cpnTable>
        </div>

        <!-- dialog -->
        <el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" @close="closeForm">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
                <el-form-item label="区域名称:" prop="regionHazardInformId">
                    <el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
                        <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="包保领导:" prop="leader">
                    <el-select v-model="ruleForm.leader" filterable multiple placeholder="请选择包保领导">
                        <el-option v-for="item in allPersons" :key="item.key" :label="item.label" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="小组成员:" prop="staff">
                    <el-transfer ref="transfer" v-model="ruleForm.staff" filterable :filter-method="filterMethod"
                        filter-placeholder="请输入员工姓名" :titles="['未选择', '已选择']" :data="allPersons">
                    </el-transfer>
                </el-form-item>

                <el-form-item label="风险源情况:" prop="riskSourceSituation">
                    <el-input type="textarea" v-model="ruleForm.riskSourceSituation" clearable placeholder="请输入风险源情况">
                    </el-input>
                </el-form-item>

                <el-form-item label="应对措施:" prop="countermeasures">
                    <el-input type="textarea" v-model="ruleForm.countermeasures" clearable placeholder="请输入应对措施">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="asyncVisible = false">取 消</el-button>
                <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {throttle} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法
import cpnTable from '@/components/element/Table'
export default {
    data() {
        return {
            isRender: false,
            loading: false,
            asyncVisible: false,
            submitMode: '', // add update
            total: 0,
            queryInfo: {
                pageNum: 1,
                pageSize: 10,
                regionHazardInformId: '',
            },
            areaNames: [], // 区域名称
            allPersons: [], // 所有人员渲染数据.穿梭框和选择框一起使用.
            dataList: [], // table渲染数据
            tableColumns: [], // table配置
            ruleForm: {}, // 按钮表单
            rules: {
                regionHazardInformId: [{required: true, message: '请选择区域名称', trigger: 'change'}],
                leader: [{required: true, message: '请选择包保领导', trigger: 'change'}],
                staff: [{required: true, message: '请选择小组成员', trigger: 'blur'}],
                riskSourceSituation: [{required: true, message: '请输入风险源情况', trigger: 'blur'}],
                countermeasures: [{required: true, message: '请输入应对措施', trigger: 'blur'}],
            },
            $http: '', // api路径赋值
        }
    },
    components: {
        cpnTable
    },
    computed: {
        isUpdate() {
            return this.submitMode === 'update'
        },
        dialogTitle() {
            return this.isUpdate ? '修改区域' : '新增区域'
        },
    },
    created() {
        this.$http = this.$api.Safety.RiskGrad.allocation
        this.setFormProps()
        this.setTableColumn()
        this.getLists()
        this.getAreaName()
    },
    methods: {
        // 获取table列表数据
        getLists() {
            this.loading = true
            let params = this.queryInfo
            this.$http.getLists(params).then(res => {
                if (res.statusMsg === 'ok') {
                    this.total = res.data.total
                    this.dataList = res.data.list
                }
                this.loading = false
            })
        },
        // 获取管服人员数据...showDialog时调用
        getPerson() {
            this.getPerson = this.runOnce(() => {
                return new Promise(resolve => {
                    this.$api.Personnerl.SEARCHMORTGAGEELIST({
                        userType: 1,
                        pageNum: 1,
                        pageSize: 9999
                    }).then((res) => {
                        if (res.success) {
                            const list = res.data.list
                            const out = []
                            list.forEach(item => {
                                out.push({
                                    label: item.realName, // 穿梭框规定字段, 可绑定props属性修改默认规定的字段.
                                    key: item.userId, // 穿梭框规定使字段
                                })
                            })
                            this.allPersons = out
                            resolve()
                        }
                    })
                })
            })
            return this.getPerson()
        },
        // 获取区域信息
        getAreaName() {
            this.$api.Safety.RiskGrad.warning.getLists({
                pageNum: 1,
                pageSize: 9999
            }).then((res) => {
                if (res.success) {
                    const list = res.data.list
                    const out = []
                    list.forEach(item => {
                        out.push({
                            id: item.id,
                            region: item.region,
                        })
                    })
                    this.areaNames = out
                }
            })
        },
        // 初始化 ruleform
        setFormProps(options = {}) {
            let _form = {
                regionHazardInformId: '', // 区域名称id
                leader: [],  // 包保领导
                staff: [],  // 小组成员
                riskSourceSituation: '', // 风险源情况
                countermeasures: '',  // 应对措施
            }
            this.ruleForm = Object.keys(options).length ? options : _form
        },
        // 初始化 table 配置
        setTableColumn() {
            this.tableColumns = [
                {index: true},
                {
                    name: "区域名称", key: "regionHazardInformId", formatter: (row) => {
                        return row.region
                    }
                },
                {
                    name: "包保领导", key: "leaderList", formatter: (row) => {
                        let el = ''
                        row.leaderList.forEach(item => {
                            el += item.realName + '、'
                        })
                        return el
                    }
                },
                {
                    name: "小组成员", key: "staffList", formatter: (row) => {
                        let el = ''
                        row.staffList.forEach(item => {
                            el += item.realName + '、'
                        })
                        return el
                    }
                },
                {name: "风险源情况", key: "riskSourceSituation"},
                {name: "应对措施", key: "countermeasures"},
                {
                    operation: true, name: "操作", width: 140, value: [
                        {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
                        {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
                    ]
                },
            ]
        },
        runOnce(fn, context) { //控制让函数只触发一次
            return () => {
                if (!fn) return
                try {
                    return fn.apply(context || this, arguments)
                }
                finally {
                    fn = null
                }
            }
        },
        // 穿梭框搜索关键字变化时触发
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        // 重置穿梭框选中状态
        resetTransfer(transferName) {
            this.$refs[transferName].$refs.leftPanel.checked = []
            this.$refs[transferName].$refs.rightPanel.checked = []
        },
        // 显示表单
        async showForm() {
            !this.isRender && (this.isRender = true)
            this.asyncVisible = true
            await this.getPerson()
        },
        // 隐藏表单
        closeForm() {
            this.asyncVisible = false
            this.resetForm('ruleForm')
            this.resetTransfer('transfer')
        },
        // 查询按钮列表信息
        queryReset() {
            this.queryInfo.pageNum = 1
            this.queryInfo.pageSize = 10
            this.getLists()
        },
        // 添加数据
        addRow() {
            this.submitMode = 'add'
            this.showForm()
        },
        // 更新数据
        async updateRow(row) {
            this.submitMode = 'update'
            await this.showForm()
            this.$nextTick(() => {
                this.ruleForm.id = ''
                const strongObj = {
                    staff: [],
                    leader: [],
                }
                row.staffList.forEach(item => {
                    strongObj.staff.push(item.userId)
                })
                row.leaderList.forEach(item => {
                    strongObj.leader.push(item.userId)
                })
                Object.keys(this.ruleForm).forEach(item => {
                    if (row.hasOwnProperty.call(row, item)) {
                        this.ruleForm[item] = strongObj[item] || row[item]
                    }
                })
            })
        },
        // 删除数据
        deleteRow(row) {
            const params = {id: row.id}
            this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$http.delete(params).then(res => {
                    if (res.statusMsg === 'ok') {
                        this.queryReset();
                        this.$message.success("删除成功！")
                    } else {
                        this.$message.warning(res.statusMsg)
                    }
                })
            }).catch(() => {
                this.$message.warning("您已取消")
            })
        },
        // 提交表单
        onSubmit: throttle(function (formName) {
            this.$refs[formName].validate(valid => {
                if (!valid) return
                const params = this.ruleForm
                if (this.isUpdate) {
                    // 更新
                    this.$http.update(params).then((res) => {
                        if (res.statusMsg === 'ok') {
                            this.closeForm()
                            this.getLists()
                            this.$message.success('更新成功！')
                        } else {
                            this.$message.warning(res.statusMsg)
                        }
                    })
                } else {
                    // 添加
                    this.$http.insert(params).then((res) => {
                        if (res.statusMsg === 'ok') {
                            this.closeForm()
                            this.getLists()
                            this.$message.success('添加成功！')
                        } else {
                            this.$message.warning(res.statusMsg)
                        }
                    })
                }
            })
        }, 1000),
        // 分页改变
        pageChange() {
            this.getLists()
        },
    }
}
</script>
  
<style lang="scss" scoped>
@import '@/style/layout-main.scss';

/deep/ {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px transparent;
        background: #39B5FE;
    }

    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: rgba(76, 188, 254, .3);
    }
}
</style>

 web/src/views/SecureManage/RiskGrad/DangerInform.vue

@@ -1,3 +1,268 @@
<template>
    <div>危险源告知</div>
    <!-- 安全管理 ==> 风险分级管控 => 危险源告知-->
    <div class="main">
        <!-- header -->
        <div class="main_header">
            <div class="header_item">
                <span class="header_label">安全等级：</span>
                <el-select v-model="queryInfo.levelType" placeholder="请选择安全等级" clearable>
                    <el-option v-for="item in safetyLevels" :key="item.levelType" :label="item.name"
                        :value="item.levelType">
                    </el-option>
                </el-select>
            </div>
            <div class="header_item">
                <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
                <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
            </div>
        </div>

        <!-- table -->
        <div class="main_content">
            <cpnTable :table-index="true" :table-data="dataList" :table-columns="tableColumns" :page-total="total"
                :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
            </cpnTable>
        </div>

        <!-- dialog -->
        <el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" width="460px"
            @close="closeForm">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
                <el-form-item label="区域名称:" prop="region">
                    <el-input v-model="ruleForm.region" clearable placeholder="请输入区域名称"></el-input>
                </el-form-item>
                <el-form-item label="安全等级:" prop="levelType">
                    <el-select v-model="ruleForm.levelType" placeholder="请选择">
                        <el-option v-for="item in safetyLevels" :key="item.levelType" :label="item.name"
                            :value="item.levelType">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域颜色:" prop="regionColor">
                    <el-input v-model="ruleForm.regionColor" placeholder="请选择区域颜色" disabled></el-input>
                    <el-color-picker v-model="ruleForm.regionColor"></el-color-picker>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="asyncVisible = false">取 消</el-button>
                <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {throttle} from '@/plugins/public'; // 导入节流、动态切换组件尺寸方法
import cpnTable from '@/components/element/Table'
export default {
    data() {
        return {
            isRender: false,
            loading: false,
            asyncVisible: false,
            submitMode: '', // add update
            total: 0,
            queryInfo: {
                pageNum: 1,
                pageSize: 10,
                levelType: '',
            },
            safetyLevelMap: {
                1: {name: 'IV-A级', levelType: 1},
                2: {name: 'IV-B级', levelType: 1},
                3: {name: 'IV-C级', levelType: 1},
                4: {name: 'IV-D级', levelType: 1},
            }, //  安全等级 map
            safetyLevels: [
                {name: 'IV-A级', levelType: 1},
                {name: 'IV-B级', levelType: 2},
                {name: 'IV-C级', levelType: 3},
                {name: 'IV-D级', levelType: 4},
            ], // 安全等级 arr
            dataList: [],
            tableColumns: [], // table配置
            ruleForm: {}, // 按钮表单
            rules: {
                region: [{required: true, message: '请输入区域名称', trigger: 'blur'}],
                levelType: [{required: true, message: '请选择安全等级', trigger: 'change'}],
                regionColor: [{required: true, message: '请选择区域颜色', trigger: 'change'}],
            },
            $http: '', // api路径赋值
        }
    },
    components: {
        cpnTable
    },
    computed: {
        isUpdate() {
            return this.submitMode === 'update'
        },
        dialogTitle() {
            return this.isUpdate ? '修改区域' : '新增区域'
        },
    },
    created() {
        this.$http = this.$api.Safety.RiskGrad.warning
        this.setFormProps()
        this.setTableColumn()
        this.getLists()
    },
    methods: {
        // 获取table列表数据
        getLists() {
            this.loading = true
            let params = this.queryInfo
            this.$http.getLists(params).then(res => {
                if (res.statusMsg === 'ok') {
                    this.total = res.data.total
                    this.dataList = res.data.list
                }
                this.loading = false
            })
        },
        // 初始化 ruleform
        setFormProps(options = {}) {
            let _form = {
                region: '', // 区域名称
                levelType: '', // 安全等级
                regionColor: '',  // 区域等级颜色
            }
            this.ruleForm = Object.keys(options).length ? options : _form
        },
        // 初始化 table 配置
        setTableColumn() {
            this.tableColumns = [
                {index: true},
                {name: "区域名称", key: "region"},
                {name: "安全等级", key: "levelType", formatter: (row) => {return this.safetyLevelMap[row.levelType].name}},
                {name: "区域颜色", key: "regionColor"},
                {
                    operation: true, name: "操作", width: 140, value: [
                        {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
                        {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
                    ]
                },
            ]
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        // 显示表单
        showForm() {
            !this.isRender && (this.isRender = true)
            this.asyncVisible = true
        },
        // 隐藏表单
        closeForm() {
            this.asyncVisible = false
            this.resetForm('ruleForm')
        },
        // 查询按钮列表信息
        queryReset() {
            this.queryInfo.pageNum = 1
            this.queryInfo.pageSize = 10
            this.getLists()
        },
        // 添加数据
        addRow() {
            this.submitMode = 'add'
            this.showForm()
        },
        // 更新数据
        updateRow(row) {
            this.submitMode = 'update'
            this.showForm()
            this.$nextTick(() => {
                this.ruleForm.id = ''
                Object.keys(this.ruleForm).forEach(item => {
                    if (row.hasOwnProperty.call(row, item)) {
                        this.ruleForm[item] = row[item]
                    }
                })
            })
        },
        // 删除数据
        deleteRow(row) {
            const params = {id: row.id}
            this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$http.delete(params).then(res => {
                    if (res.statusMsg === 'ok') {
                        this.queryReset();
                        this.$message.success("删除成功！")
                    } else {
                        this.$message.warning(res.statusMsg)
                    }
                })
            }).catch(() => {
                this.$message.warning("您已取消")
            })
        },
        // 提交表单
        onSubmit: throttle(function () {
            this.$refs.ruleForm.validate(valid => {
                if (!valid) return
                const params = this.ruleForm
                if (this.isUpdate) {
                    // 更新
                    this.$http.update(params).then((res) => {
                        if (res.statusMsg === 'ok') {
                            this.closeForm()
                            this.getLists()
                            this.$message.success('更新成功！')
                        } else {
                            this.$message.warning(res.statusMsg)
                        }
                    })
                } else {
                    // 添加
                    this.$http.insert(params).then((res) => {
                        if (res.statusMsg === 'ok') {
                            this.closeForm()
                            this.getLists()
                            this.$message.success('添加成功！')
                        } else {
                            this.$message.warning(res.statusMsg)
                        }
                    })
                }
            })
        }, 1000),
        // 分页改变
        pageChange() {
            this.getLists()
        },
    }
}
</script>
  
<style lang="scss" scoped>
@import '@/style/layout-main.scss';

/deep/ {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px transparent;
        background: #39B5FE;
    }

    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px transparent;
        border-radius: 10px;
        background: rgba(76, 188, 254, .3);
    }
}
</style>