jhprjv2/ruoyi-ui/src/views/wxsetting/labourComplaint/index.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>