714 lines
22 KiB
Vue
714 lines
22 KiB
Vue
<template>
|
||
<div class="app-container" v-loading="loading">
|
||
<transition v-if="state == 'INIT'" name="el-zoom-in-center">
|
||
<div v-show="state == 'INIT'" class="transition-box">
|
||
<el-alert
|
||
v-if="display"
|
||
show-icon
|
||
title="温馨提示"
|
||
type="info"
|
||
description="请如实准确的填写劳资投诉信息，投诉受理后我们会快速响应并处理。请勿重复提交投诉！"
|
||
close-text="查询投诉进度"
|
||
@close="showSearch"
|
||
>
|
||
</el-alert>
|
||
<el-form
|
||
ref="form"
|
||
label-position="top"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="180px"
|
||
>
|
||
<el-form-item label="投诉人姓名" prop="laborName">
|
||
<el-input v-model="form.laborName" placeholder="请输入投诉人姓名" />
|
||
</el-form-item>
|
||
<el-form-item label="投诉人手机号码" prop="laborPhone">
|
||
<el-input
|
||
v-model="form.laborPhone"
|
||
type="number"
|
||
pattern="[0-9]*"
|
||
placeholder="请输入投诉人手机号码"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="投诉人身份证号码" prop="laborCardId">
|
||
<el-input v-model="form.laborCardId" placeholder="请输入投诉人身份证号码" />
|
||
</el-form-item>
|
||
<el-form-item label="所属项目单位" prop="projectId">
|
||
<el-select
|
||
v-model="form.projectId"
|
||
filterable
|
||
placeholder="请选择所属项目单位"
|
||
@change="projectChange"
|
||
class="sel"
|
||
>
|
||
<el-option
|
||
v-for="item in projectOptions"
|
||
:key="item.id"
|
||
:label="item.projectName"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="所属总承包单位" prop="deptId" v-if="form.projectId">
|
||
<el-select
|
||
v-model="form.deptId"
|
||
placeholder="请选择所属总承包单位"
|
||
@change="deptChange"
|
||
class="sel"
|
||
>
|
||
<el-option
|
||
v-for="item in deptOptions"
|
||
:key="'dept' + item.unitId"
|
||
:label="item.unitName"
|
||
:value="item.unitId"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="所属劳务分包单位" prop="subDeptId" v-if="form.projectId">
|
||
<el-select
|
||
v-model="form.subDeptId"
|
||
placeholder="请选择所属劳务分包单位"
|
||
@change="subDeptChange"
|
||
class="sel"
|
||
>
|
||
<el-option
|
||
v-for="item in subDeptOptions"
|
||
:key="'subDept' + item.unitId"
|
||
:label="item.unitName"
|
||
:value="item.unitId"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="欠薪人数" prop="laborNumber">
|
||
<el-input
|
||
v-model="form.laborNumber"
|
||
type="number"
|
||
pattern="[0-9]*"
|
||
placeholder="请输入欠薪人数"
|
||
max="99999"
|
||
>
|
||
<i slot="suffix">人</i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="欠薪金额" prop="laborAmount">
|
||
<el-input
|
||
v-model="form.laborAmount"
|
||
type="number"
|
||
pattern="[0-9]*"
|
||
placeholder="请输入欠薪金额"
|
||
max="999999999"
|
||
>
|
||
<i slot="suffix">元</i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="拖欠原因说明" prop="laborReason">
|
||
<el-input
|
||
v-model="form.laborReason"
|
||
type="textarea"
|
||
rows="3"
|
||
placeholder="请输入拖欠原因说明"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="凭证附件" prop="files">
|
||
<image-upload v-model="form.files" :limit="9" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: center; padding-bottom: 20px">
|
||
<el-button
|
||
round
|
||
icon="el-icon-finished"
|
||
type="primary"
|
||
@click="submitForm"
|
||
style="width: 90%; background-color: #409eff; border-color: #409eff"
|
||
>确 定 提 交 投 诉</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<transition v-if="state == 'OK'" name="el-zoom-in-center">
|
||
<div v-show="state == 'OK'" class="transition-box">
|
||
<el-result
|
||
style="margin-top: 50px"
|
||
icon="success"
|
||
title="投诉成功"
|
||
subTitle="我们已收到您的劳资投诉，问题已提交相关部门审核。"
|
||
>
|
||
<template slot="extra">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-thumb"
|
||
size="medium"
|
||
plain
|
||
round
|
||
style="
|
||
width: 100%;
|
||
background-color: #409eff;
|
||
border-color: #409eff;
|
||
color: #ffffff;
|
||
"
|
||
@click="findFlowInfos"
|
||
:disabled="disabled"
|
||
:class="disabled ? 'button-dis' : 'button-active'"
|
||
>{{ buttonText }}</el-button
|
||
>
|
||
</template>
|
||
</el-result>
|
||
</div>
|
||
</transition>
|
||
<transition v-if="state == 'NO'" name="el-zoom-in-center">
|
||
<div v-show="state == 'NO'" class="transition-box">
|
||
<el-result
|
||
style="margin-top: 50px"
|
||
icon="warning"
|
||
title="投诉失败"
|
||
subTitle="我们已收到您的劳资投诉，问题已提交相关部门审核，请勿重复投诉。"
|
||
>
|
||
<template slot="extra">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-thumb"
|
||
size="medium"
|
||
style="
|
||
width: 100%;
|
||
background-color: #409eff;
|
||
border-color: #409eff;
|
||
color: #ffffff;
|
||
"
|
||
@click="findFlowInfos"
|
||
:disabled="disabled"
|
||
:class="disabled ? 'button-dis' : 'button-active'"
|
||
>{{ buttonText }}</el-button
|
||
>
|
||
</template>
|
||
</el-result>
|
||
</div>
|
||
</transition>
|
||
<transition v-if="state == 'QUERY'" name="el-zoom-in-center">
|
||
<div v-show="state == 'QUERY'" class="transition-box">
|
||
<el-alert
|
||
v-if="display"
|
||
show-icon
|
||
title="温馨提示"
|
||
type="info"
|
||
description="请输入身份证号码查询投诉进度及投诉结果！"
|
||
close-text="返回投诉主页"
|
||
@close="showIndex"
|
||
>
|
||
</el-alert>
|
||
<el-form
|
||
ref="queryForm"
|
||
:model="queryForm"
|
||
:rules="rules"
|
||
style="margin-top: 30px"
|
||
>
|
||
<el-form-item prop="laborCardId">
|
||
<el-input
|
||
v-model="queryForm.laborCardId"
|
||
placeholder="请输入投诉人身份证号码查询"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: center">
|
||
<el-button
|
||
round
|
||
icon="el-icon-thumb"
|
||
type="primary"
|
||
@click="submitQuery"
|
||
:disabled="disabled"
|
||
:class="disabled ? 'button-dis' : 'button-active'"
|
||
>{{ buttonText }}</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<div class="inspect_max" v-if="showInspect">
|
||
<div class="inspect_list">
|
||
<div class="inspect_for" v-for="(item, index) in flowLabours">
|
||
<div class="inspect_for_bgd">
|
||
<div class="inspect_list_title">
|
||
<div class="inspect_list_title_label inspect_list_title_width">
|
||
<div class="inspect_list_title_number">
|
||
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
|
||
</div>
|
||
<div class="module_title module_title_flex inspect_list_title_text">
|
||
投诉时间：{{ item.createTime }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="
|
||
item.approveStatus == '100'
|
||
? 'inspect_shtg'
|
||
: 'inspect_shz'
|
||
"
|
||
>
|
||
<div class="inspect_list_info_details">
|
||
<div class="inspect_list_info_data">
|
||
<div class="inspect_list_info_data_prop">
|
||
项目名称：{{ item.projectName }}
|
||
</div>
|
||
<div class="inspect_list_info_data_prop">
|
||
总包单位：{{ item.deptName }}
|
||
</div>
|
||
<div class="inspect_list_info_data_prop" v-if="item.subDeptId">
|
||
分包单位：{{ item.subDeptName }}
|
||
</div>
|
||
<div class="inspect_list_info_data_prop">
|
||
欠薪人数：{{ item.laborNumber }} <el-tag size="small">人</el-tag>
|
||
</div>
|
||
<div class="inspect_list_info_data_prop">
|
||
欠薪金额：{{ item.laborAmount }} <el-tag size="small">元</el-tag>
|
||
</div>
|
||
<div class="inspect_list_info_data_prop" v-if="item.files">
|
||
<image-preview
|
||
v-for="(file, idx) in item.files.split(',')"
|
||
v-show="idx < 3"
|
||
:src="file"
|
||
:width="90"
|
||
:height="90"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="inspect_list_info_position">
|
||
原因说明：{{ item.laborReason }}
|
||
</div>
|
||
<div class="inspect_list_info_data_prop" style="text-align: center">
|
||
<el-button
|
||
type="text"
|
||
style="color: #1890ff"
|
||
@click="showDetail(item.id, index)"
|
||
>
|
||
<i class="el-icon-d-arrow-right"></i>
|
||
{{ nav == index ? "收起" : "展开" }}处理详细信息
|
||
<i class="el-icon-d-arrow-left"></i>
|
||
</el-button>
|
||
</div>
|
||
<div class="inspect_list_info_data_prop block" v-show="nav == index">
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(node, idx) in flowLabourNodes"
|
||
:key="'fns' + idx"
|
||
:icon="
|
||
node.flowNode % 10 == 0
|
||
? 'el-icon-circle-check'
|
||
: 'el-icon-circle-close'
|
||
"
|
||
:color="node.flowNode % 10 == 0 ? '#0bbd87' : '#f56c6c'"
|
||
:type="node.flowNode % 10 == 0 ? 'success' : 'danger'"
|
||
size="normal"
|
||
:timestamp="node.createTime"
|
||
>
|
||
{{
|
||
node.flowNode == "0"
|
||
? node.createBy + " 提交投诉"
|
||
: node.flowNodeName
|
||
}}
|
||
<el-card shadow="never" v-show="node.flowNode != '0'">
|
||
<p>{{ node.flowComment }}</p>
|
||
<p v-if="node.files">
|
||
<image-preview
|
||
v-for="(file, idx) in node.files.split(',')"
|
||
:src="file"
|
||
:width="50"
|
||
:height="50"
|
||
/>
|
||
</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="flowLabours.length == 0">
|
||
<div style="padding-top: 70px; text-align: -webkit-center">
|
||
<el-image
|
||
src="https://szgcwx.jhncidg.com/staticFiles/nodata.png"
|
||
style="width: 200px; height: 135px"
|
||
></el-image>
|
||
<div style="color: #a5abbb; margin-top: 20px">暂 无 投 诉 信 息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addFlowLabourInfo,
|
||
findMyFlowLabours,
|
||
findMyFlowLabourNodes,
|
||
} from "@/api/flow/flowLabourInfo";
|
||
export default {
|
||
name: "labourComplaint",
|
||
data() {
|
||
return {
|
||
state: "INIT",
|
||
// 遮罩层
|
||
loading: false,
|
||
display: true,
|
||
showInspect: false,
|
||
// 表单参数
|
||
form: {},
|
||
queryForm: {},
|
||
// 选项列表
|
||
projectOptions: [],
|
||
deptOptions: [],
|
||
subDeptOptions: [],
|
||
flowLabours: [],
|
||
flowLabourNodes: [],
|
||
nav: null,
|
||
// 表单校验
|
||
rules: {
|
||
laborName: [{ required: true, message: "请输入投诉人名称", trigger: "blur" }],
|
||
laborPhone: [
|
||
{ required: true, message: "请输入投诉人手机号码", trigger: "blur" },
|
||
{
|
||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||
message: "请输入正确的手机号码",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
laborCardId: [
|
||
{ required: true, message: "请输入投诉人身份证号", trigger: "blur" },
|
||
{
|
||
pattern: /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/,
|
||
message: "请输入正确的身份证号",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
projectId: [{ required: true, message: "请选择所属项目单位", trigger: "blur" }],
|
||
deptId: [{ required: true, message: "请选择所属总承包单位", trigger: "blur" }],
|
||
subDeptId: [
|
||
{ required: true, message: "请选择所属劳务分包单位", trigger: "blur" },
|
||
],
|
||
laborNumber: [
|
||
{ required: true, message: "请输入欠薪人数", trigger: "blur" },
|
||
{
|
||
min: 0,
|
||
max: 6,
|
||
message: "输入的数值过大，请确认后重新输入",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
laborAmount: [
|
||
{ required: true, message: "请输入欠薪金额", trigger: "blur" },
|
||
{
|
||
min: 0,
|
||
max: 10,
|
||
message: "输入的数值过大，请确认后重新输入",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
laborReason: [
|
||
{ required: true, message: "请输入拖欠原因说明", trigger: "blur" },
|
||
{ max: 200, message: "最多输入600字符", trigger: "blur" },
|
||
],
|
||
},
|
||
timer: null, // 定时器
|
||
count: 60, // 初始倒计时时间（单位：s）
|
||
buttonText: "查 询 投 诉 进 度", // 按钮显示文本
|
||
disabled: false, // 按钮是否可点击
|
||
};
|
||
},
|
||
created() {
|
||
this.reset();
|
||
this.getAllProjects();
|
||
},
|
||
methods: {
|
||
getAllProjects() {
|
||
this.$api.publics.getProjectAllList().then((response) => {
|
||
this.projectOptions = response.data || [];
|
||
});
|
||
},
|
||
projectChange(v) {
|
||
this.projectOptions.forEach((option) => {
|
||
if (option.id == v) {
|
||
this.form.projectName = option.projectName;
|
||
}
|
||
});
|
||
this.form.deptId = null;
|
||
this.form.subDeptId = null;
|
||
this.$api.publics.queryAllUnitList(v, 2).then((response) => {
|
||
this.deptOptions = response.data || [];
|
||
});
|
||
this.$api.publics.queryAllUnitList(v, 3).then((response) => {
|
||
this.subDeptOptions = response.data || [];
|
||
});
|
||
},
|
||
deptChange(v) {
|
||
this.deptOptions.forEach((option) => {
|
||
if (option.unitId == v) {
|
||
this.form.deptName = option.unitName;
|
||
}
|
||
});
|
||
//this.$set(this.form, 'deptId', v);
|
||
this.$forceUpdate();
|
||
},
|
||
subDeptChange(v) {
|
||
this.subDeptOptions.forEach((option) => {
|
||
if (option.unitId == v) {
|
||
this.form.subDeptName = option.unitName;
|
||
}
|
||
});
|
||
//this.$set(this.form, 'subDeptId', v);
|
||
this.$forceUpdate();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
projectId: null
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
let that = this;
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
addFlowLabourInfo(this.form).then((response) => {
|
||
setTimeout(() => {
|
||
that.loading = false;
|
||
if (response.data.id > 0) {
|
||
this.state = "OK";
|
||
} else {
|
||
this.state = "NO";
|
||
}
|
||
}, 1200);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
showIndex() {
|
||
this.state = "INIT";
|
||
},
|
||
showSearch() {
|
||
this.state = "QUERY";
|
||
},
|
||
findFlowInfos() {
|
||
this.loading = true;
|
||
findMyFlowLabours(this.form.laborCardId).then((response) => {
|
||
this.loading = false;
|
||
this.flowLabours = response.data || [];
|
||
this.showInspect = true;
|
||
this.startCountdown();
|
||
});
|
||
},
|
||
submitQuery() {
|
||
this.$refs["queryForm"].validate((valid) => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
findMyFlowLabours(this.queryForm.laborCardId).then((response) => {
|
||
this.loading = false;
|
||
this.flowLabours = response.data || [];
|
||
this.showInspect = true;
|
||
this.startCountdown();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
resetCountdown() {
|
||
this.count = 60;
|
||
this.buttonText = "查 询 投 诉 进 度";
|
||
this.disabled = false; // 恢复按钮可点击
|
||
},
|
||
startCountdown() {
|
||
this.disabled = true; // 禁用按钮
|
||
this.buttonText = `${this.count} 秒 后 继 续 查 询`;
|
||
this.timer = setInterval(() => {
|
||
this.count--;
|
||
this.buttonText = `${this.count} 秒 后 继 续 查 询`;
|
||
if (this.count <= 0) {
|
||
clearInterval(this.timer);
|
||
this.resetCountdown();
|
||
}
|
||
}, 1000);
|
||
},
|
||
showDetail(detailId, nv) {
|
||
if (this.nav == nv) {
|
||
this.nav = null;
|
||
return false;
|
||
}
|
||
this.loading = true;
|
||
findMyFlowLabourNodes(detailId).then((response) => {
|
||
this.loading = false;
|
||
this.nav = nv;
|
||
this.flowLabourNodes = response.data || [];
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scope>
|
||
.app-container {
|
||
height: 100%;
|
||
background-image: url("https://szgc.jhncidg.com/profile/static/bg.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.el-form--label-top .el-form-item__label {
|
||
padding: 0 !important;
|
||
}
|
||
.el-input__suffix {
|
||
right: 10px !important;
|
||
}
|
||
.el-alert {
|
||
display: flex !important;
|
||
}
|
||
.el-alert--info.is-light {
|
||
background: cornflowerblue !important;
|
||
color: #ffffff !important;
|
||
}
|
||
.el-alert--info .el-alert__description {
|
||
color: #ffffff !important;
|
||
}
|
||
.el-select-dropdown {
|
||
left: 20px !important;
|
||
right: 20px !important;
|
||
}
|
||
.sel {
|
||
width: 100%;
|
||
}
|
||
.el-alert__closebtn {
|
||
color: #f3cd46 !important;
|
||
font-weight: 900 !important;
|
||
}
|
||
.el-result__title {
|
||
font-weight: 900 !important;
|
||
}
|
||
.el-result__extra {
|
||
width: 100% !important;
|
||
}
|
||
.inspect_max {
|
||
padding: 0;
|
||
}
|
||
.inspect_list {
|
||
padding: 5px 0;
|
||
}
|
||
.inspect_for {
|
||
padding: 10px 0;
|
||
font-size: 13px;
|
||
}
|
||
.inspect_for_bgd {
|
||
background: #d3e0ed;
|
||
padding: 0 15px;
|
||
border-radius: 5px 5px 0 0;
|
||
}
|
||
.inspect_list_title {
|
||
border-bottom: 1px solid #323b86;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 900;
|
||
}
|
||
.inspect_list_title_label {
|
||
display: flex;
|
||
align-items: center;
|
||
width: calc(100% - 75px);
|
||
}
|
||
.inspect_list_title_width {
|
||
width: 100%;
|
||
}
|
||
.inspect_list_title_number {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-bottom: 1px solid #000000;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #000000;
|
||
}
|
||
.inspect_list_title_text {
|
||
width: calc(100% - 40px);
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.module_title_flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.module_title {
|
||
height: 20px;
|
||
line-height: 20px;
|
||
padding-left: 20px;
|
||
background: url("https://szgcwx.jhncidg.com/staticFiles/images/lw_8.png") no-repeat
|
||
left/17px;
|
||
}
|
||
.inspect_shtg {
|
||
padding: 15px 3px;
|
||
background-size: 120px 120px !important;
|
||
background: url("https://szgcwx.jhncidg.com/staticFiles/images/shtg.png") no-repeat top
|
||
40px right;
|
||
}
|
||
.inspect_shz {
|
||
padding: 15px 3px;
|
||
background-size: 120px 120px !important;
|
||
background: url("https://szgcwx.jhncidg.com/staticFiles/images/shz.png") no-repeat top
|
||
40px right;
|
||
}
|
||
.inspect_shbh {
|
||
padding: 15px 3px;
|
||
background-size: 120px 120px !important;
|
||
background: url("https://szgcwx.jhncidg.com/staticFiles/images/shbh.png") no-repeat top
|
||
40px right;
|
||
}
|
||
.inspect_list_info_details {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.inspect_list_info_data {
|
||
width: 100%;
|
||
}
|
||
.inspect_list_info_data_prop {
|
||
padding: 5px 0;
|
||
word-break: break-all;
|
||
}
|
||
.inspect_list_info_position {
|
||
padding-bottom: 2px;
|
||
}
|
||
.button-active {
|
||
color: #ffffff;
|
||
width: 90% !important;
|
||
background-color: #1890ff !important;
|
||
border-color: #1890ff !important;
|
||
}
|
||
.button-dis {
|
||
color: #000000;
|
||
width: 90% !important;
|
||
background-color: #e6ebf5 !important;
|
||
border-color: #e6ebf5 !important;
|
||
}
|
||
.block {
|
||
border-radius: 5px;
|
||
}
|
||
.el-timeline {
|
||
padding-left: 5px !important;
|
||
}
|
||
.el-timeline-item__wrapper {
|
||
padding-left: 15px !important;
|
||
}
|
||
.el-timeline-item__content {
|
||
font-weight: 900;
|
||
}
|
||
.el-card {
|
||
border: 0px !important;
|
||
background-color: #d3e0ed !important;
|
||
}
|
||
.el-card__body {
|
||
border: 0px !important;
|
||
padding: 0px !important;
|
||
padding-right: 10px !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
.el-image {
|
||
margin-right: 6px !important;
|
||
}
|
||
</style>
|