1471 lines
44 KiB
Vue
1471 lines
44 KiB
Vue
<template>
|
||
<!-- 危大工程字典页面 -->
|
||
<div class="fullHeight">
|
||
<div class="block fullHeight">
|
||
<div class="system-left">
|
||
<div class="areaTreeInner whiteBlock fullHeight">
|
||
<div class="left-header">
|
||
<p class="pageTitle">危大工程类别</p>
|
||
<el-button
|
||
type="primary"
|
||
size="medium"
|
||
@click="add(1)"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
新增分类
|
||
</el-button>
|
||
</div>
|
||
<el-form size="medium" ref="riskListForm" :model="riskListForm">
|
||
<el-form-item>
|
||
<el-input
|
||
@blur="loadList"
|
||
suffix-icon="el-icon-search"
|
||
v-model="riskListForm.nodeName"
|
||
placeholder="请输入内容"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="treeBox">
|
||
<vue-scroll v-if="dataList.length > 0">
|
||
<el-tree
|
||
:data="dataList"
|
||
@node-click="handleNodeClick"
|
||
:props="defaultProps"
|
||
:default-expanded-keys="defaultExpandedKeys"
|
||
:default-expand-all="defaultExpandAll"
|
||
@node-expand="handleNodeExpand"
|
||
@node-collapse="handleNodeCollapse"
|
||
node-key="id"
|
||
ref="tree"
|
||
>
|
||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||
<span
|
||
style="
|
||
width: 56%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
"
|
||
class="videoName projectName"
|
||
:class="{
|
||
'color_333 font-bold': data.parentId == 0,
|
||
}"
|
||
:title="data.typeName"
|
||
>{{ data.typeName }}</span
|
||
>
|
||
<span class="operateBtns">
|
||
<i
|
||
style="color: #5181f6"
|
||
class="el-icon-circle-plus-outline"
|
||
@click.stop="add(2, data.id)"
|
||
></i>
|
||
<i
|
||
style="color: #5181f6"
|
||
class="el-icon-edit"
|
||
@click.stop="edit1(data, 1)"
|
||
></i>
|
||
<i
|
||
style="color: #f76c6c"
|
||
class="el-icon-delete"
|
||
@click.stop="del1(data)"
|
||
></i>
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>
|
||
<img src="@/assets/images/noData2.png" alt="" srcset="" />
|
||
<p>{{ $t("message.videoManage.empty") }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar_btn2">
|
||
<el-button
|
||
@click="setCheckedNodes"
|
||
style="color: #b3b3b3"
|
||
size="mini"
|
||
type="text"
|
||
plain
|
||
>全部展开</el-button
|
||
>
|
||
<el-button
|
||
@click="setCheckedKeys"
|
||
style="color: #b3b3b3"
|
||
size="mini"
|
||
type="text"
|
||
plain
|
||
>全部关闭</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="system-right">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<!-- 类别描述 -->
|
||
<el-tab-pane
|
||
:label="$t('message.dangerousBigDictionary.typeDescribe')"
|
||
name="first"
|
||
></el-tab-pane>
|
||
<!-- 管控要点 -->
|
||
<el-tab-pane
|
||
:label="$t('message.dangerousBigDictionary.controlGist')"
|
||
name="second"
|
||
></el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<div
|
||
class="table_box"
|
||
style="margin: 13px"
|
||
v-if="activeName == 'first'"
|
||
>
|
||
<div v-if="$route.path.indexOf('/project/') == -1">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
style="float: right; margin: -2px 15px 0 0"
|
||
@click="add(3)"
|
||
>
|
||
<!-- 添加类别描述 -->
|
||
{{
|
||
$t("message.dangerousBigDictionary.add") +
|
||
$t("message.dangerousBigDictionary.typeDescribe")
|
||
}}
|
||
</el-button>
|
||
<!-- <el-button
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
style="float: right; margin: -2px 15px 0 0"
|
||
@click="downloadFn"
|
||
>
|
||
下载检查表导入模板
|
||
</el-button>
|
||
<el-upload
|
||
:disabled="leftId == ''"
|
||
ref="upload"
|
||
:before-upload="beforeAvatarUpload"
|
||
:action="
|
||
$http.defaults.baseURL +
|
||
'xmgl/inspectTableLibrary/uploadExcelInspectTable'
|
||
"
|
||
:limit="1"
|
||
:show-file-list="false"
|
||
:data="{
|
||
userId: $store.state.userInfo.userId,
|
||
classifyId: this.leftId,
|
||
}"
|
||
name="excelFile"
|
||
style="float: right; margin: -2px 15px 0 0"
|
||
:on-success="handleSuccess"
|
||
>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
plain
|
||
v-loading.fullscreen.lock="fullscreenLoading"
|
||
>导入检查表
|
||
</el-button>
|
||
</el-upload> -->
|
||
</div>
|
||
<el-table height="652px" :data="threeData" class="tables">
|
||
<!-- 序号 -->
|
||
<el-table-column
|
||
type="index"
|
||
:label="$t('message.dangerousBigDictionary.serial')"
|
||
width="50"
|
||
align="center"
|
||
></el-table-column>
|
||
<!-- 危大工程类别 -->
|
||
<el-table-column
|
||
prop="typeName"
|
||
:label="$t('message.dangerousBigDictionary.dangerBigType')"
|
||
align="center"
|
||
>
|
||
<!-- <template slot-scope="scope">
|
||
<span
|
||
>{{ dialogdata.typeName }}</span
|
||
>
|
||
</template> -->
|
||
</el-table-column>
|
||
<!-- 类别描述 -->
|
||
<el-table-column
|
||
prop="describeName"
|
||
:label="$t('message.dangerousBigDictionary.typeDescribe')"
|
||
align="center"
|
||
></el-table-column>
|
||
<!-- 是否超危 -->
|
||
<el-table-column
|
||
prop="dangerType"
|
||
:label="$t('message.dangerousBigDictionary.isSuperDanger')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
>{{
|
||
scope.row.dangerType == 2
|
||
? $t("message.dangerousBigDictionary.yes")
|
||
: $t("message.dangerousBigDictionary.no")
|
||
}}
|
||
<!-- 是：否 -->
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 管控要点 -->
|
||
<el-table-column
|
||
prop="tableName"
|
||
:label="$t('message.dangerousBigDictionary.controlGist')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
class="primaryText hovers"
|
||
@click="showBindDialogFn(scope.row)"
|
||
>{{
|
||
scope.row.contentList ? scope.row.contentList.length : 0
|
||
}}</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column
|
||
:label="$t('message.dangerousBigDictionary.actions')"
|
||
align="center"
|
||
width="200"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click="edit1(scope.row, 3)"
|
||
type="text"
|
||
size="small"
|
||
icon="el-icon-edit"
|
||
>
|
||
<span style="font-size: 14px">
|
||
<!-- 编辑 -->
|
||
{{ $t("message.dangerousBigDictionary.edit") }}
|
||
</span>
|
||
</el-button>
|
||
<el-button
|
||
@click="del2(scope.row)"
|
||
type="text"
|
||
size="small"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
>
|
||
<span style="font-size: 14px">
|
||
<!-- 删除 -->
|
||
{{ $t("message.dangerousBigDictionary.remove") }}
|
||
</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="table_box" style="margin: 13px" v-else>
|
||
<div v-if="$route.path.indexOf('/project/') == -1">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
style="float: right; margin: -2px 15px 0 0"
|
||
@click="add(4)"
|
||
>
|
||
<!-- 添加管控内容 -->
|
||
{{
|
||
$t("message.dangerousBigDictionary.add") +
|
||
$t("message.dangerousBigDictionary.controlContent")
|
||
}}
|
||
</el-button>
|
||
</div>
|
||
<el-table height="652px" :data="itemDetailsData" class="tables">
|
||
<!-- 序号 -->
|
||
<el-table-column
|
||
type="index"
|
||
:label="$t('message.dangerousBigDictionary.serial')"
|
||
width="50"
|
||
align="center"
|
||
></el-table-column>
|
||
<!-- 分类 -->
|
||
<el-table-column
|
||
prop="controlTypeName"
|
||
:label="$t('message.dangerousBigDictionary.type')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.controlTypeName }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 管控内容 -->
|
||
<el-table-column
|
||
prop="controlContent"
|
||
:label="$t('message.dangerousBigDictionary.controlContent')"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<!-- 显示状态 -->
|
||
<el-table-column
|
||
prop="tableName"
|
||
:label="$t('message.dangerousBigDictionary.showStatus')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="primaryText" style="margin-right: 20px">{{
|
||
scope.row.yesShowName
|
||
}}</span>
|
||
<span class="redText">{{ scope.row.noShowName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column
|
||
:label="$t('message.dangerousBigDictionary.actions')"
|
||
align="center"
|
||
width="200"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click="editCheckItem(scope.row)"
|
||
type="text"
|
||
size="small"
|
||
icon="el-icon-edit"
|
||
>
|
||
<span style="font-size: 14px">
|
||
<!-- 编辑 -->
|
||
{{ $t("message.dangerousBigDictionary.edit") }}
|
||
</span>
|
||
</el-button>
|
||
<el-button
|
||
@click="delCheckItem(scope.row)"
|
||
type="text"
|
||
size="small"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
>
|
||
<span style="font-size: 14px">
|
||
<!-- 删除 -->
|
||
{{ $t("message.dangerousBigDictionary.remove") }}
|
||
</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
class="dialig"
|
||
:modal-append-to-body="false"
|
||
:title="title"
|
||
:visible.sync="dialogVisible"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
ref="form"
|
||
:model="dialogdata"
|
||
:rules="rules"
|
||
label-width="120px"
|
||
size="medium"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- <el-form-item label="编码" prop="code">
|
||
<el-input
|
||
v-model="dialogdata.code"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item> -->
|
||
<!-- 分类名称 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.typeName')"
|
||
prop="typeName"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.typeName"
|
||
:placeholder="
|
||
$t('message.dangerousBigDictionary.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="排序">
|
||
<el-input-number v-model="dialogdata.orderSort"></el-input-number>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input
|
||
v-model="dialogdata.remark"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item> -->
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
@click="dialogVisible = false"
|
||
size="medium"
|
||
icon="el-icon-circle-close"
|
||
>
|
||
<!-- 取 消 -->
|
||
{{ $t("message.dangerousBigDictionary.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="editSave('form')"
|
||
size="medium"
|
||
icon="el-icon-circle-check"
|
||
>
|
||
<!-- 确 定 -->
|
||
{{ $t("message.dangerousBigDictionary.confirm") }}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
class="dialig"
|
||
:modal-append-to-body="false"
|
||
:title="title"
|
||
:visible.sync="dialogVisible3"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
ref="form2"
|
||
:model="dialogdata"
|
||
label-width="120px"
|
||
:rules="rules2"
|
||
size="medium"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- 类别描述名称 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.typeDescribeName')"
|
||
prop="describeName"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.describeName"
|
||
:placeholder="
|
||
$t('message.dangerousBigDictionary.placeholderText')
|
||
"
|
||
type="textarea"
|
||
autosize
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 是否超危 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.isSuperDanger')"
|
||
prop="dangerType"
|
||
>
|
||
<el-radio v-model="dialogdata.dangerType" :label="1">
|
||
<!-- 否 -->
|
||
{{ $t("message.dangerousBigDictionary.no") }}
|
||
</el-radio>
|
||
<el-radio v-model="dialogdata.dangerType" :label="2">
|
||
<!-- 是 -->
|
||
{{ $t("message.dangerousBigDictionary.yes") }}
|
||
</el-radio>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
@click="dialogVisible3 = false"
|
||
size="medium"
|
||
icon="el-icon-circle-close"
|
||
>
|
||
<!-- 取 消 -->
|
||
{{ $t("message.dangerousBigDictionary.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="editSave('form2')"
|
||
:loading="isloading"
|
||
size="medium"
|
||
icon="el-icon-circle-check"
|
||
>
|
||
<!-- 确 定 -->
|
||
{{ $t("message.dangerousBigDictionary.confirm") }}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- '添加管控内容':'编辑管控内容' -->
|
||
<el-dialog
|
||
class="dialig"
|
||
:modal-append-to-body="false"
|
||
:title="
|
||
isAddControl
|
||
? $t('message.dangerousBigDictionary.add') +
|
||
$t('message.dangerousBigDictionary.controlContent')
|
||
: $t('message.dangerousBigDictionary.edit') +
|
||
$t('message.dangerousBigDictionary.controlContent')
|
||
"
|
||
:visible.sync="TableCheckDialog"
|
||
width="667px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
ref="TableCheckItemForm"
|
||
:model="TableCheckItem"
|
||
label-width="130px"
|
||
:rules="TableCheckItemRules"
|
||
size="medium"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- 分类名称 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.typeName')"
|
||
prop="controlTypeName"
|
||
>
|
||
<el-input
|
||
v-model="TableCheckItem.controlTypeName"
|
||
:placeholder="
|
||
$t('message.dangerousBigDictionary.placeholderText')
|
||
"
|
||
type="textarea"
|
||
autosize
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 管控内容 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.controlContent')"
|
||
prop="controlContent"
|
||
>
|
||
<el-input
|
||
v-model="TableCheckItem.controlContent"
|
||
:placeholder="
|
||
$t('message.dangerousBigDictionary.placeholderText')
|
||
"
|
||
type="textarea"
|
||
autosize
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 错误显示的名称 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.errorShowName')"
|
||
prop="noShowName"
|
||
>
|
||
<el-input
|
||
v-model="TableCheckItem.noShowName"
|
||
:placeholder="
|
||
$t('message.dangerousBigDictionary.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 对显示的名称 -->
|
||
<el-form-item
|
||
:label="$t('message.dangerousBigDictionary.successShowName')"
|
||
prop="yesShowName"
|
||
>
|
||
<el-input v-model="TableCheckItem.yesShowName"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
@click="TableCheckDialog = false"
|
||
size="medium"
|
||
icon="el-icon-circle-close"
|
||
>
|
||
<!-- 取 消 -->
|
||
{{ $t("message.dangerousBigDictionary.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="editTableCheckSave('TableCheckItemForm')"
|
||
:loading="isloading"
|
||
size="medium"
|
||
icon="el-icon-circle-check"
|
||
>
|
||
<!-- 确 定 -->
|
||
{{ $t("message.dangerousBigDictionary.confirm") }}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 绑定管控内容 -->
|
||
<el-dialog
|
||
class="dialig"
|
||
:modal-append-to-body="false"
|
||
:title="
|
||
$t('message.dangerousBigDictionary.bind') +
|
||
$t('message.dangerousBigDictionary.controlContent')
|
||
"
|
||
:visible.sync="bindControlDialog"
|
||
width="867px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-table
|
||
class="tables"
|
||
ref="multipleTable"
|
||
:data="itemDetailsData"
|
||
style="width: 100%"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
align="center"
|
||
width="55"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
</el-table-column>
|
||
<!-- 分类 -->
|
||
<el-table-column
|
||
prop="controlTypeName"
|
||
:label="$t('message.dangerousBigDictionary.type')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.controlTypeName }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 管控内容 -->
|
||
<el-table-column
|
||
prop="controlContent"
|
||
:label="$t('message.dangerousBigDictionary.controlContent')"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<!-- 显示状态 -->
|
||
<el-table-column
|
||
prop="tableName"
|
||
:label="$t('message.dangerousBigDictionary.showStatus')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="primaryText" style="margin-right: 20px">{{
|
||
scope.row.yesShowName
|
||
}}</span>
|
||
<span class="redText">{{ scope.row.noShowName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
label="状态"
|
||
align="center"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
@click="delBindFn(scope.row)"
|
||
type="text"
|
||
size="small"
|
||
style="color: red"
|
||
icon="el-icon-delete"
|
||
>
|
||
<span style="font-size: 14px">取消绑定</span>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column> -->
|
||
</el-table>
|
||
<div
|
||
class="dialog-footer"
|
||
v-if="$route.path.indexOf('/project/') == -1"
|
||
>
|
||
<el-button
|
||
@click="bindControlDialog = false"
|
||
size="medium"
|
||
icon="el-icon-circle-close"
|
||
>
|
||
<!-- 取 消 -->
|
||
{{ $t("message.dangerousBigDictionary.cancel") }}
|
||
</el-button>
|
||
<!-- <el-button
|
||
type="danger"
|
||
@click="delBindFn()"
|
||
size="medium"
|
||
icon="el-icon-circle-check"
|
||
>
|
||
删除绑定
|
||
{{$t('message.dangerousBigDictionary.remove')+$t('message.dangerousBigDictionary.bind')}}
|
||
</el-button
|
||
> -->
|
||
<el-button
|
||
type="primary"
|
||
@click="saveSelectedControl()"
|
||
size="medium"
|
||
icon="el-icon-circle-check"
|
||
>
|
||
<!-- 绑 定 -->
|
||
{{ $t("message.dangerousBigDictionary.bind") }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
adddangerousEngineeringTypeApi,
|
||
editdangerousEngineeringTypeApi,
|
||
deletedangerousEngineeringTypeApi,
|
||
selectdangerousEngineeringTypeApi,
|
||
adddangerousEngineeringTypeDescribeApi,
|
||
selectdangerousEngineeringTypeDescribeApi,
|
||
editdangerousEngineeringTypeDescribeApi,
|
||
deletedangerousEngineeringTypeDescribeApi,
|
||
adddangerousEngineeringTypeControlContentApi,
|
||
selectdangerousEngineeringTypeControlContentApi,
|
||
editdangerousEngineeringTypeControlContentApi,
|
||
deletedangerousEngineeringTypeControlContentApi,
|
||
typeDescribeControlAddApi,
|
||
typeDescribeControlDeleteApi,
|
||
} from "@/assets/js/api/dangerousBigProject";
|
||
export default {
|
||
data() {
|
||
return {
|
||
isloading: false,
|
||
currentTwo: -1,
|
||
dialogVisible: false,
|
||
dialogVisible2: false,
|
||
dialogVisible3: false,
|
||
current: 0,
|
||
dataList: [],
|
||
riskListForm: {
|
||
projectType: "",
|
||
nodeName: "",
|
||
},
|
||
riskListDetailInfo: {},
|
||
defaultExpandAll: false,
|
||
defaultExpandedKeys: [],
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "typeName",
|
||
},
|
||
threeData: [],
|
||
// editId: "",
|
||
title: "",
|
||
dialogdata: {
|
||
code: "",
|
||
remark: "",
|
||
typeName: "",
|
||
parentId: "",
|
||
sn: "",
|
||
type: 1,
|
||
orderSort: 0,
|
||
},
|
||
parentid: "",
|
||
parentid1: "",
|
||
type: 0,
|
||
ofThree: false,
|
||
threeIndex: -1,
|
||
rules: {
|
||
typeName: [{ required: true, message: "必填", trigger: "blur" }],
|
||
// code: [{ required: true, message: "必填", trigger: "blur" }],
|
||
},
|
||
rules2: {
|
||
typeName: [{ required: true, message: "必填", trigger: "blur" }],
|
||
dangerType: [{ required: true, message: "必选", trigger: "change" }],
|
||
},
|
||
secondId: "",
|
||
fullscreenLoading: false,
|
||
leftId: "",
|
||
itemDetailsData: [],
|
||
TableCheckItem: {},
|
||
TableCheckDialog: false,
|
||
TableCheckItemRules: {
|
||
controlTypeName: [{ required: true, message: "必填", trigger: "blur" }],
|
||
controlContent: [{ required: true, message: "必填", trigger: "blur" }],
|
||
noShowName: [{ required: true, message: "必填", trigger: "blur" }],
|
||
yesShowName: [{ required: true, message: "必填", trigger: "blur" }],
|
||
},
|
||
activeName: "first",
|
||
isAddControl: true,
|
||
bindControlDialog: false,
|
||
multipleSelection: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.loadList();
|
||
},
|
||
//列表加载
|
||
methods: {
|
||
delBindFn(item) {
|
||
let arr = [];
|
||
this.multipleSelection.forEach((element) => {
|
||
arr.push(element.id);
|
||
});
|
||
typeDescribeControlDeleteApi({
|
||
controlId: arr.join(","),
|
||
describeId: this.dialogdata.id,
|
||
}).then((res) => {
|
||
// 取消绑定成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.cancelBindMessage")
|
||
);
|
||
this.bindControlDialog = false;
|
||
this.loadRigthtList();
|
||
});
|
||
},
|
||
handleSelectionChange(val) {
|
||
console.log("----", val);
|
||
this.multipleSelection = val;
|
||
},
|
||
saveSelectedControl() {
|
||
let arr = [];
|
||
this.multipleSelection.forEach((element) => {
|
||
arr.push(element.id);
|
||
});
|
||
typeDescribeControlAddApi({
|
||
controlId: arr.join(","),
|
||
describeId: this.dialogdata.id,
|
||
}).then((res) => {
|
||
this.bindControlDialog = false;
|
||
this.loadRigthtList();
|
||
});
|
||
},
|
||
showBindDialogFn(item) {
|
||
this.bindControlDialog = true;
|
||
this.dialogdata.id = item.id;
|
||
this.$nextTick(() => {
|
||
console.log(111);
|
||
this.$refs.multipleTable.clearSelection();
|
||
console.log(222);
|
||
if (this.$route.path.indexOf("/project/") != -1) {
|
||
this.itemDetailsData = item.contentList ? item.contentList : [];
|
||
} else {
|
||
this.getCheckItem(1, item.contentList);
|
||
}
|
||
});
|
||
},
|
||
beforeAvatarUpload() {
|
||
this.fullscreenLoading = true;
|
||
},
|
||
handleSuccess(res, file) {
|
||
console.log(res);
|
||
this.$refs.upload.clearFiles();
|
||
this.fullscreenLoading = false;
|
||
if (res.code == 200 || res.code == 0) {
|
||
this.$message.success("导入成功！");
|
||
this.loadList();
|
||
} else {
|
||
this.$message.error("导入失败！");
|
||
}
|
||
},
|
||
downloadFn() {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/inspectTableLibrary/downloadExcelInspectTable";
|
||
},
|
||
add(type, id) {
|
||
if (id) {
|
||
this.parentid1 = id;
|
||
}
|
||
this.type = type;
|
||
this.dialogdata = {};
|
||
if (this.type == 1) {
|
||
this.dialogVisible = true;
|
||
// "新增分类"
|
||
this.title = this.$t("message.dangerousBigDictionary.addType");
|
||
} else if (this.type == 2) {
|
||
this.dialogVisible = true;
|
||
// 新增二级分类
|
||
this.title = this.$t("message.dangerousBigDictionary.addType2");
|
||
} else if (this.type == 3) {
|
||
this.dialogVisible3 = true;
|
||
// 新增类别描述
|
||
this.title = this.$t("message.dangerousBigDictionary.addType3");
|
||
} else if (this.type == 4) {
|
||
this.TableCheckItem = {};
|
||
this.TableCheckDialog = true;
|
||
this.isAddControl = true;
|
||
}
|
||
},
|
||
editSave(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
// this.isloading = true;
|
||
if (this.title.indexOf("编辑") == -1) {
|
||
if (this.type == 1) {
|
||
this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
|
||
this.dialogdata.parentId = 0;
|
||
} else if (this.type == 2) {
|
||
this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
|
||
this.dialogdata.parentId = this.parentid1;
|
||
} else if (this.type == 3) {
|
||
this.dialogdata.typeId = this.riskListDetailInfo.id;
|
||
}
|
||
}
|
||
// console.log(this.dialogdata)
|
||
//
|
||
if (this.type == 1 || this.type == 2) {
|
||
// 编辑
|
||
if (
|
||
this.title.indexOf(
|
||
this.$t("message.dangerousBigDictionary.edit")
|
||
) != -1
|
||
) {
|
||
editdangerousEngineeringTypeApi(this.dialogdata).then((res) => {
|
||
// this.isloading = false;
|
||
this.dialogVisible = false;
|
||
this.dialogVisible2 = false;
|
||
this.dialogVisible3 = false;
|
||
this.loadList();
|
||
// 更新成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.updateSuccess")
|
||
);
|
||
});
|
||
} else {
|
||
adddangerousEngineeringTypeApi(this.dialogdata).then((res) => {
|
||
this.isloading = false;
|
||
this.dialogVisible = false;
|
||
this.dialogVisible2 = false;
|
||
this.dialogVisible3 = false;
|
||
this.loadList();
|
||
// 添加成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.addSuccess")
|
||
);
|
||
});
|
||
}
|
||
} else {
|
||
// 编辑
|
||
if (
|
||
this.title.indexOf(
|
||
this.$t("message.dangerousBigDictionary.edit")
|
||
) != -1
|
||
) {
|
||
editdangerousEngineeringTypeDescribeApi(this.dialogdata).then(
|
||
(res) => {
|
||
this.isloading = false;
|
||
this.dialogVisible = false;
|
||
this.dialogVisible2 = false;
|
||
this.dialogVisible3 = false;
|
||
this.loadRigthtList();
|
||
// 更新成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.updateSuccess")
|
||
);
|
||
}
|
||
);
|
||
} else {
|
||
adddangerousEngineeringTypeDescribeApi(this.dialogdata).then(
|
||
(res) => {
|
||
this.isloading = false;
|
||
this.dialogVisible = false;
|
||
this.dialogVisible2 = false;
|
||
this.dialogVisible3 = false;
|
||
this.loadRigthtList();
|
||
// 添加成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.addSuccess")
|
||
);
|
||
}
|
||
);
|
||
}
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
edit1(data, type) {
|
||
data = JSON.parse(JSON.stringify(data));
|
||
this.type = type;
|
||
if (data.children) {
|
||
delete data["children"];
|
||
}
|
||
if (data.creatTime) {
|
||
delete data["creatTime"];
|
||
}
|
||
this.dialogdata = data;
|
||
if (this.type == 1) {
|
||
this.dialogVisible = true;
|
||
// 编辑分类
|
||
this.title = this.$t("message.dangerousBigDictionary.editType");
|
||
this.$nextTick(() => {
|
||
this.$refs.form.clearValidate();
|
||
});
|
||
} else if (this.type == 2) {
|
||
this.dialogVisible = true;
|
||
// 编辑二级分类
|
||
this.title = this.$t("message.dangerousBigDictionary.editType2");
|
||
this.$nextTick(() => {
|
||
this.$refs.form.clearValidate();
|
||
});
|
||
} else if (this.type == 3) {
|
||
this.dialogVisible3 = true;
|
||
// 编辑类别描述
|
||
this.title = this.$t("message.dangerousBigDictionary.editType3");
|
||
this.$nextTick(() => {
|
||
this.$refs.form2.clearValidate();
|
||
});
|
||
} else if (this.type == 4) {
|
||
}
|
||
},
|
||
del1(obj) {
|
||
this.$confirm(
|
||
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
|
||
"【" +
|
||
obj.typeName +
|
||
"】?",
|
||
this.$t("message.personnelPosition.beaconManage.table.Tips"),
|
||
{
|
||
confirmButtonText: this.$t(
|
||
"message.personnelPosition.confirmButtonText"
|
||
),
|
||
cancelButtonText: this.$t(
|
||
"message.personnelPosition.cancelButtonText"
|
||
),
|
||
type: "warning",
|
||
}
|
||
).then(() => {
|
||
deletedangerousEngineeringTypeApi({ id: obj.id }).then((result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.loadList();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
del2(obj) {
|
||
this.$confirm(
|
||
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
|
||
"【" +
|
||
obj.describeName +
|
||
"】?",
|
||
this.$t("message.personnelPosition.beaconManage.table.Tips"),
|
||
{
|
||
confirmButtonText: this.$t(
|
||
"message.personnelPosition.confirmButtonText"
|
||
),
|
||
cancelButtonText: this.$t(
|
||
"message.personnelPosition.cancelButtonText"
|
||
),
|
||
type: "warning",
|
||
}
|
||
).then(() => {
|
||
deletedangerousEngineeringTypeDescribeApi({ id: obj.id }).then(
|
||
(result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.loadRigthtList();
|
||
}
|
||
}
|
||
);
|
||
});
|
||
},
|
||
showThree(data, index) {
|
||
this.currentTwo = index;
|
||
this.type = 3;
|
||
this.threeIndex = index;
|
||
this.parentid = data.id;
|
||
this.ofThree = true;
|
||
// if (data.children.length != 0) {
|
||
this.threeData = data.children;
|
||
// }
|
||
},
|
||
handleNodeClick(data) {
|
||
this.riskListDetailInfo = {
|
||
...data,
|
||
};
|
||
this.leftId = data.id;
|
||
this.parentid1 = data.id;
|
||
this.loadRigthtList();
|
||
},
|
||
loadList() {
|
||
let param = {
|
||
sn: this.$store.state.userInfo.headquartersSn,
|
||
};
|
||
selectdangerousEngineeringTypeApi(param).then((res) => {
|
||
this.dataList = res.result;
|
||
if (res.result.length > 0) {
|
||
this.parentid1 = res.result[0].id;
|
||
this.current = 0;
|
||
this.loadRigthtList();
|
||
}
|
||
});
|
||
},
|
||
loadRigthtList() {
|
||
let param = {
|
||
typeId: this.riskListDetailInfo.id ? this.riskListDetailInfo.id : 0,
|
||
};
|
||
selectdangerousEngineeringTypeDescribeApi(param).then((res) => {
|
||
this.threeData = res.result;
|
||
});
|
||
},
|
||
//获取类别描述详细
|
||
getCheckItem(type, rows) {
|
||
selectdangerousEngineeringTypeControlContentApi({
|
||
typeId: this.parentid1,
|
||
}).then((res) => {
|
||
this.itemDetailsData = res.result;
|
||
if (type && rows) {
|
||
this.$nextTick(() => {
|
||
rows.forEach((row) => {
|
||
for (
|
||
let index = 0;
|
||
index < this.itemDetailsData.length;
|
||
index++
|
||
) {
|
||
if (this.itemDetailsData[index].id == row.id) {
|
||
this.$refs.multipleTable.toggleRowSelection(
|
||
this.itemDetailsData[index]
|
||
);
|
||
console.log(333);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
editCheckItem(item) {
|
||
this.isAddControl = false;
|
||
this.TableCheckItem = JSON.parse(JSON.stringify(item));
|
||
this.TableCheckDialog = true;
|
||
},
|
||
delCheckItem(obj) {
|
||
this.$confirm(
|
||
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
|
||
"【" +
|
||
obj.controlContent +
|
||
"】?",
|
||
this.$t("message.personnelPosition.beaconManage.table.Tips"),
|
||
{
|
||
confirmButtonText: this.$t(
|
||
"message.personnelPosition.confirmButtonText"
|
||
),
|
||
cancelButtonText: this.$t(
|
||
"message.personnelPosition.cancelButtonText"
|
||
),
|
||
type: "warning",
|
||
}
|
||
).then(() => {
|
||
deletedangerousEngineeringTypeControlContentApi({ id: obj.id }).then(
|
||
(result) => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
this.getCheckItem();
|
||
}
|
||
}
|
||
);
|
||
});
|
||
},
|
||
editTableCheckSave(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
if (this.isAddControl) {
|
||
this.TableCheckItem.typeId = this.parentid1;
|
||
adddangerousEngineeringTypeControlContentApi(
|
||
this.TableCheckItem
|
||
).then((res) => {
|
||
this.TableCheckDialog = false;
|
||
this.getCheckItem();
|
||
// 添加成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.addSuccess")
|
||
);
|
||
});
|
||
} else {
|
||
editdangerousEngineeringTypeControlContentApi(
|
||
this.TableCheckItem
|
||
).then((res) => {
|
||
this.TableCheckDialog = false;
|
||
this.getCheckItem();
|
||
// 更新成功！
|
||
this.$message.success(
|
||
this.$t("message.dangerousBigDictionary.updateSuccess")
|
||
);
|
||
});
|
||
}
|
||
} else {
|
||
console.log("error submit!!");
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
handleClick() {
|
||
if (this.activeName == "first") {
|
||
this.loadRigthtList();
|
||
} else {
|
||
this.getCheckItem();
|
||
}
|
||
},
|
||
//全部关闭
|
||
setCheckedKeys() {
|
||
this.defaultExpandAll = false;
|
||
for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
||
this.$refs.tree.store._getAllNodes()[i].expanded =
|
||
this.defaultExpandAll;
|
||
const { data } = this.$refs.tree.store._getAllNodes()[i];
|
||
this.handleNodeCollapse(data);
|
||
}
|
||
console.log(this.defaultExpandedKeys);
|
||
},
|
||
//全部展开
|
||
setCheckedNodes() {
|
||
// defaultExpandedKeys
|
||
console.log(this.$refs.tree.store._getAllNodes());
|
||
this.defaultExpandAll = true; //展开所有节点
|
||
for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
||
// this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpandAll;
|
||
const { data } = this.$refs.tree.store._getAllNodes()[i];
|
||
if (data.children.length > 0) {
|
||
this.handleNodeExpand(data);
|
||
}
|
||
}
|
||
},
|
||
// 树节点展开
|
||
handleNodeExpand(data) {
|
||
// 保存当前展开的节点
|
||
const flag = this.defaultExpandedKeys.some((item) => {
|
||
if (item === data.id) {
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if (!flag) {
|
||
// 不存在则存到数组里
|
||
this.defaultExpandedKeys.push(data.id);
|
||
}
|
||
},
|
||
// 树节点关闭
|
||
handleNodeCollapse(data) {
|
||
// 删除当前关闭的节点
|
||
this.defaultExpandedKeys.some((item, i) => {
|
||
if (item === data.id) {
|
||
this.defaultExpandedKeys.splice(i, 1);
|
||
}
|
||
});
|
||
this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
|
||
},
|
||
// 删除树子节点
|
||
removeChildrenIds(data) {
|
||
if (data.children) {
|
||
data.children.forEach((item) => {
|
||
const index = this.defaultExpandedKeys.indexOf(item.id);
|
||
if (index > 0) {
|
||
this.defaultExpandedKeys.splice(index, 1);
|
||
}
|
||
this.removeChildrenIds(item);
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.sidebar_btn2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 8px;
|
||
> .el-button:hover {
|
||
color: #5181f6 !important;
|
||
}
|
||
> .el-button {
|
||
// padding: 0;
|
||
position: relative;
|
||
border: none;
|
||
// margin-left: 10px;
|
||
}
|
||
> .el-button:first-child::before {
|
||
content: " ";
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -10px;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 90%;
|
||
background-color: #d9d9d9;
|
||
}
|
||
}
|
||
.areaTreeInner {
|
||
// background-color: rgba(0, 0, 0, 0.7);
|
||
width: 100%;
|
||
// padding: 20px 15px;
|
||
.treeStyle();
|
||
.left-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
.operateBtns {
|
||
float: right; //向右浮动
|
||
|
||
i {
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.treeBox {
|
||
height: calc(100% - 56px - 59px - 30px);
|
||
background-color: rgba(216, 216, 216, 0.2);
|
||
padding-top: 10px;
|
||
}
|
||
.flex() {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.treeStyle() {
|
||
/deep/.el-tree {
|
||
font-size: 15px;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
.el-tree-node {
|
||
white-space: normal;
|
||
&:focus > .el-tree-node__content {
|
||
background-color: transparent;
|
||
}
|
||
&.is-current > .el-tree-node__content {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
.el-tree-node__content {
|
||
// height: 32px;
|
||
padding: 7px 0;
|
||
height: auto;
|
||
line-height: 16px;
|
||
position: relative;
|
||
// margin-bottom: 7px;
|
||
&:hover {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
|
||
.videoName {
|
||
font-size: 14px;
|
||
}
|
||
.projectName {
|
||
font-size: 14px;
|
||
width: calc(100% - 55px);
|
||
display: inline-block;
|
||
}
|
||
.companyName2 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
width: 192px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.el-tree-node__expand-icon {
|
||
font-size: 16px;
|
||
padding: 0 6px;
|
||
&.is-leaf {
|
||
color: transparent !important;
|
||
}
|
||
}
|
||
.treeTitle {
|
||
background-color: #f7f7f7;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
.custom-tree-node {
|
||
width: 100%;
|
||
}
|
||
.el-button--small,
|
||
.el-button--small.is-round {
|
||
padding: 6px 9px;
|
||
}
|
||
.block {
|
||
overflow: hidden;
|
||
height: calc(100% + 0px);
|
||
background-color: #f3f5fd;
|
||
.system-left {
|
||
float: left;
|
||
width: 300px;
|
||
padding: 20px 15px;
|
||
height: calc(100% - 40px);
|
||
background-color: white;
|
||
.treeList {
|
||
background-color: rgba(216, 216, 216, 0.2);
|
||
height: calc(100% - 42px) !important;
|
||
}
|
||
li {
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
.clickName {
|
||
// width: calc(100% - 176px);
|
||
width: 74%;
|
||
.imgbox {
|
||
display: inline-block;
|
||
margin: 0 6px 0 13px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
li:hover,
|
||
.active {
|
||
// background: linear-gradient(270deg, white, #b7d8ff 100%);
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: @--color-primary;
|
||
}
|
||
#child {
|
||
li {
|
||
font-size: 15px;
|
||
padding-left: 39px;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
.system-right {
|
||
float: right;
|
||
// margin-right: 1.5%;
|
||
margin-left: 20px;
|
||
width: calc(100% - 330px - 20px - 30px);
|
||
// min-height: 620px;
|
||
height: calc(100% - 40px);
|
||
// border: 1px solid #e9e9e9;
|
||
background-color: white;
|
||
padding: 20px 15px;
|
||
}
|
||
}
|
||
.formTwoInput {
|
||
/deep/.el-form-item__content {
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
.el-icon-question {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/deep/.input-with-select {
|
||
.el-input-group__append {
|
||
background-color: #fff;
|
||
}
|
||
.el-select {
|
||
width: 130px !important;
|
||
.el-input {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
}
|
||
.jyjzPage {
|
||
.block {
|
||
background-color: transparent;
|
||
.system-left {
|
||
background-color: #112446;
|
||
}
|
||
.system-right {
|
||
background-color: transparent;
|
||
}
|
||
.treeList {
|
||
background-color: #0d1a34;
|
||
}
|
||
}
|
||
}
|
||
.pageTitle2 {
|
||
cursor: pointer;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
.el-icon-back {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
::v-deep.el-form-item.foldLabel .el-form-item__label {
|
||
white-space: pre-line; /*换行显示*/
|
||
height: 32px; /*设置lable高度，与input高度一样*/
|
||
line-height: 16px !important; /*设置行高为label高度的一半（有n行就是label高度的1/n）*/
|
||
}
|
||
</style>
|