jhprjv2/ruoyi-ui/src/views/flow/flowLabourInfo/approveFlowLabourDrawer.vue

<template>
  <div class="flow-labour-drawer">
    <el-drawer
      v-if="isOpen"
      :visible.sync="isOpen"
      ref="drawer"
      direction="rtl"
      @close="closeCallBack"
      size="60%"
    >
      <template slot="title">
        <div>{{ title }}</div>
      </template>
      <div class="drawer">
        <div class="drawerLeft">
          <el-steps :active="active" finish-status="success" simple>
            <el-step title="提交投诉"></el-step>
            <el-step title="总包处理"></el-step>
            <el-step title="甲代审核"></el-step>
            <el-step title="集团审核"></el-step>
          </el-steps>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in flowLabourNodes"
              :key="index"
              :icon="setIcon(item)"
              :color="setColor(item)"
            >
              <p style="font-weight: 700">
                {{ getSort(index)
                }}{{
                  item.flowNode == "0" ? item.createBy + "提交投诉" : item.flowNodeName
                }}
              </p>
              <el-card :body-style="{ padding: '6px' }">
                <el-descriptions class="margin-top" :column="1" size="small" border>
                  <el-descriptions-item
                    v-if="item.createBy"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"><i class="el-icon-user"></i>办理人</template>
                    {{ item.createBy }}
                    <el-tag type="info" size="mini" v-show="item.flowNode == '0'">{{
                      dataInfo.subDeptName
                    }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-if="item.createTime"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"><i class="el-icon-date"></i>处理时间</template>
                    {{ item.createTime }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-if="item.flowComment"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"
                      ><i class="el-icon-tickets"></i>处理意见</template
                    >
                    {{ item.flowComment }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-if="item.files"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"
                      ><i class="el-icon-picture"></i>凭证附件</template
                    >
                    <el-image
                      ref="preview"
                      v-for="(img, idx) in item.files.split(',')"
                      :key="idx"
                      :src="getImageUrl(img)"
                      style="width: 60px; height: 60px; margin-right: 8px"
                      @click="onPreview(img)"
                    ></el-image>
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="drawerRight">
          <el-form
            ref="form"
            v-loading="loading"
            :model="form"
            :rules="rules"
            label-width="80px"
            style="padding-right: 20px; padding-left: 20px"
          >
            <el-form-item label="项目名称">
              {{ dataInfo.projectName }}
            </el-form-item>
            <el-form-item label="总包单位">
              {{ dataInfo.deptName }}
            </el-form-item>
            <el-form-item label="分包单位">
              {{ dataInfo.subDeptName }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="投诉人">
                  {{ dataInfo.laborName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  {{ dataInfo.laborPhone }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="身份证号">
              {{ dataInfo.laborCardId }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="欠薪人数">
                  {{ dataInfo.laborNumber }} <el-tag size="small">人</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="欠薪金额">
                  {{ dataInfo.laborNumber }} <el-tag size="small">元</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="原因说明">
              {{ dataInfo.laborReason }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="投诉时间">
                  <span>{{ parseTime(dataInfo.createTime, "{y}-{m}-{d}") }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉进度">
                  <dict-tag
                    :options="dict.type.flow_labou_appstatus"
                    :value="dataInfo.approveStatus"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="凭证附件" v-if="dataInfo.files">
              <el-image
                ref="preview"
                v-for="(img, idx) in dataInfo.files.split(',')"
                :key="idx"
                :src="getImageUrl(img)"
                style="width: 65px; height: 65px; margin-right: 8px"
                @click="onPreview(img)"
              ></el-image>
            </el-form-item>
            <!-- <el-alert
              v-if="dataInfo.approveStatus != '100'"
              show-icon
              title="温馨提示"
              type="info"
              description="请如实并客观的受理投诉并核实！"
            >
            </el-alert> -->
            <el-form-item label="处理意见" prop="flowComment">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入处理意见（600字内）"
                v-model="form.flowComment"
              />
            </el-form-item>
            <el-form-item label="凭证附件" prop="files">
              <image-upload v-model="form.files" :limit="9" />
            </el-form-item>
            <div style="text-align: center; padding-bottom: 20px">
              <el-button @click="cancel">取 消</el-button>
              <el-button
                type="success"
                icon="el-icon-success"
                @click="submitForm(100)"
                v-if="dataInfo.approveStatus == '10'"
                >提 交 处 理 结 果</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-error"
                @click="submitForm(1)"
                v-if="dataInfo.approveStatus != '10' && dataInfo.approveStatus != '21'"
                >审 批 驳 回</el-button
              >
              <el-button
                type="success"
                icon="el-icon-success"
                @click="submitForm(100)"
                v-if="dataInfo.approveStatus != '10'"
                >审 批 通 过</el-button
              >
            </div>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="previewList"
      style="z-index: 2050"
    />
  </div>
</template>

<script>
import {
  getFlowLabourInfo,
  flowLabourAuditNode,
  findMyFlowLabourNodes,
} from "@/api/flow/flowLabourInfo";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "approveFlowLabourDrawer",
  components: {
    ElImageViewer,
  },
  props: {
    closeCallBack: {
      type: Function,
    },
  },
  dicts: ["flow_labou_appstatus"],
  data() {
    return {
      showViewer: false,
      open: false,
      isOpen: false,
      dataInfo: {
        files: "",
      },
      title: "",
      form: {},
      rules: {
        flowComment: [
          { required: true, message: "请输入处理意见", trigger: "blur" },
          { max: 600, message: "处理意见最多600字符", trigger: "blur" },
        ],
      },
      // 遮罩层
      loading: true,
      previewList: [],
      flowLabourNodes: [],
      active: 100,
      //label样式
      labelStyle: { width: "180px" },
      minRoles: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.minRoles = this.$store.getters.roles;
  },
  methods: {
    setIcon(row) {
      if (row.flowResult == null || row.flowResult == "100") {
        return "el-icon-check";
      } else {
        return "el-icon-close";
      }
    },
    setColor(row) {
      if (row.flowResult == null || row.flowResult == "100") {
        return "#2bc418";
      } else {
        return "#f56c6c";
      }
    },
    getSort(i) {
      let num = this.flowLabourNodes.length - i;
      if (num < 10) {
        num = "0" + num;
      }
      return num + ". ";
    },
    getImageUrl(url) {
      return process.env.VUE_APP_BASE_API + url + ".min.jpg";
    },
    onPreview(urls) {
      this.previewList = [];
      urls.split(",").forEach((item) => {
        this.previewList.push(process.env.VUE_APP_BASE_API + item);
      });
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
    show(options) {
      this.title = "劳资投诉审批详情";
      this.form = {};
      this.form.flowId = options.id;
      this.active = parseInt(options.approveStatus / 10);
      this.isOpen = true;
      getFlowLabourInfo(options.id).then((res) => {
        this.dataInfo = res.data;
        this.loading = false;
      });
      //投诉进度查看
      findMyFlowLabourNodes(options.id).then((res) => {
        this.flowLabourNodes = res.data || [];
      });
    },
    // 取消按钮
    cancel() {
      this.isOpen = false;
    },
    /** 提交按钮 */
    submitForm(v) {
      let that = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.flowResult = v;
          let msg = "审批通过";
          let wagMsg = "";
          if (v != "100") {
            msg = "审批驳回";
          }
          if (
            this.dataInfo.approveStatus == "10" ||
            this.dataInfo.approveStatus == "21"
          ) {
            msg = "提交处理结果";
            if (
              this.minRoles.includes("admin") ||
              this.minRoles.includes("super") ||
              this.minRoles.includes("jtgs") ||
              this.minRoles.includes("zgs")
            ) {
              wagMsg = "当前数据总包单位正在处理，您";
            }
          } else if (
            this.dataInfo.approveStatus == "20" ||
            this.dataInfo.approveStatus == "31"
          ) {
            if (
              this.minRoles.includes("admin") ||
              this.minRoles.includes("super") ||
              this.minRoles.includes("jtgs")
            ) {
              wagMsg = "当前数据甲方代表正在审批，您";
            }
          }
          this.$confirm(wagMsg + "是否确认" + msg + "?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              that.loading = true;
              flowLabourAuditNode(that.form).then((res) => {
                that.$modal.msgSuccess("操作成功");
                that.loading = false;
                //关闭并刷新列表
                that.$refs.drawer.closeDrawer();
              });
            })
            .catch(() => {
              console.log("取消操作");
            });
        }
      });
    },
  },
};
</script>
<style scope>
.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-steps--simple {
  padding: 5px 5px !important;
}
.el-timeline-item {
  padding-bottom: 0px !important;
}
.el-timeline {
  padding-left: 5px !important;
  padding-top: 20px !important;
}
.el-timeline-item__wrapper {
  padding-left: 15px !important;
}
.el-timeline-item__content {
  font-weight: 900;
}
.el-form-item {
  margin-bottom: 15px !important;
}
.el-step.is-simple .el-step__title{
  font-size:13px !important;
}
</style>
<style lang="scss">
.flow-labour-drawer {
  .drawer {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    .drawerLeft {
      width: 55%;
      min-width: 280px;
      height: 100%;
      float: left;
      border-right: 1px solid #dcdfe6;
      overflow-y: scroll;
      padding-right: 20px;
    }
    .drawerRight {
      width: 45%;
      min-width: 400px;
      height: 100%;
      float: left;
      padding-left: 20px;
    }
  }
}
</style>