zhgdyun/src/views/projectFront/laborManage/assessmentCentent.vue

<template>
  <!-- 评价中心 -->
  <div class="assessmentCentent whiteBlock">
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="padding: 0 15px"
    >
      <el-tab-pane
        :label="$t('message.laborMange.rewardsRecord')"
        name="rewards"
      >
        <div class="rewards_wrap">
          <el-form
            :inline="true"
            size="medium"
            :model="seekForm"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-input
                v-model="seekForm.searchName"
                :placeholder="
                  $t('message.laborMange.eventOrName')
                "
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" plain>{{
                $t("message.laborMange.inquire")
              }}</el-button>
              <el-button type="primary" @click="addInfoBtn" plain
                >{{$t("message.laborMange.newRewardInfo")}}</el-button
              >
            </el-form-item>
          </el-form>
          <el-table class="tables" :data="tableList">
            <el-table-column
              prop="eventTime"
              :label="$t('message.laborMange.occurrenceTime')"
            ></el-table-column>
            <el-table-column
              prop="workerName"
              :label="$t('message.laborMange.incentiveCrew')"
            ></el-table-column>
            <el-table-column prop="eventTitle" :label="$t('message.laborMange.eventReason')">
              <template slot-scope="scope">
                <div>{{ scope.row.eventTitle }}</div>
                <div>{{ scope.row.reason }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="awardName" :label="$t('message.laborMange.awards')"></el-table-column>
            <el-table-column prop="remarks" :label="$t('message.laborMange.remark')"></el-table-column>
            <el-table-column prop="fileUrl" :label="$t('message.laborMange.accessory')">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.fileUrl"
                  v-for="(item, index) in scope.row.fileList"
                  :key="index"
                >
                  <img
                    @click="showImg(fileUrl + item.url)"
                    :src="fileUrl + item.url"
                    style="height: 40px; width: 45px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <div class="tableBtns">
                  <el-button
                    type="text"
                    class="operationText"
                    @click="detailInfoBtn(scope.row)"
                    >{{$t('message.laborMange.details')}}</el-button
                  >
                  <div class="operationText" @click="editInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{$t('message.laborMange.edit')}}</span>
                  </div>
                  <div class="operationText" @click="deleteInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{$t('message.laborMange.delete')}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagerBox"
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pagInfo.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagInfo.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(pagInfo.total)"
            background
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('message.laborMange.badRecord')" name="badness">
        <div class="badness_wrap">
          <el-form
            :inline="true"
            size="medium"
            :model="seekForm"
            class="demo-form-inline"
          >
            <el-form-item>
              <el-select v-model="seriousGrade" :placeholder="$t('message.laborMange.pleaseChoose')">
                <el-option :label="$t('message.laborMange.allDegree')" value=""> </el-option>
                <el-option :label="$t('message.laborMange.notSerious')" :value="1"> </el-option>
                <el-option :label="$t('message.laborMange.seriousness')" :value="2"> </el-option>
                <el-option :label="$t('message.laborMange.verySerious')" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="seekForm.searchName"
                :placeholder="$t('message.laborMange.eventOrName')"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" plain>{{$t('message.laborMange.inquire')}}</el-button>
              <el-button type="primary" @click="addInfoBtn" plain
                >{{$t('message.laborMange.add')+$t('message.laborMange.badRecord')}}</el-button
              >
            </el-form-item>
          </el-form>
          <el-table class="tables" :data="tableList">
            <el-table-column
              prop="eventTime"
              :label="$t('message.laborMange.occurrenceTime')"
            ></el-table-column>
            <el-table-column
              prop="workerName"
              :label="$t('message.laborMange.personnelInvolved')"
            ></el-table-column>
            <el-table-column prop="eventTitle" :label="$t('message.laborMange.eventReason')">
              <template slot-scope="scope">
                <div>{{ scope.row.eventTitle }}</div>
                <div>{{ scope.row.reason }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="endTime" :label="$t('message.laborMange.orderOfSeverity')">
              <template slot-scope="scope">
                <span>{{
                  scope.row.seriousGrade == 1
                    ? $t('message.laborMange.notSerious')
                    : scope.row.seriousGrade == 2
                    ? $t('message.laborMange.seriousness')
                    : $t('message.laborMange.verySerious')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" :label="$t('message.laborMange.remark')"></el-table-column>
            <el-table-column prop="fileUrl" :label="$t('message.laborMange.accessory')">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.fileUrl"
                  v-for="(item, index) in scope.row.fileList"
                  :key="index"
                >
                  <!--                  <div>{{fileUrl + item.url}}</div>-->
                  <img
                    @click="showImg(fileUrl + item.url)"
                    :src="fileUrl + item.url"
                    style="height: 40px; width: 45px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <div class="tableBtns">
                  <el-button
                    type="text"
                    class="operationText"
                    @click="detailInfoBtn(scope.row)"
                    >{{$t('message.laborMange.details')}}</el-button
                  >
                  <div class="operationText" @click="editInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-edit.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{$t('message.laborMange.edit')}}</span>
                  </div>
                  <div class="operationText" @click="deleteInfoBtn(scope.row)">
                    <img
                      src="@/assets/images/icon-delete.png"
                      width="15px"
                      height="15px"
                    />
                    <span>{{$t('message.laborMange.delete')}}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagerBox"
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="pagInfo.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagInfo.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="pagInfo.total"
            background
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增 编辑 详情 弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="addEditTitle"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="addEditForm"
          label-width="100px"
          size="medium"
          class="dialogFormBox"
          :rules="addEditRules"
          :model="addEditInfo"
        >
          <el-form-item :label="$t('message.laborMange.event')" prop="eventTitle">
            <el-input
              v-model="addEditInfo.eventTitle"
              :disabled="currentType == 'details'"
              :placeholder="$t('message.workType.placeholder')"
            ></el-input>
          </el-form-item>
          <div>
            <el-form-item :label="$t('message.laborMange.occurrenceTime')" prop="eventTime">
              <el-date-picker
                :disabled="currentType == 'details'"
                v-model="addEditInfo.eventTime"
                type="date"
                value-format="yyyy-MM-dd"
                :placeholder="$t('message.laborMange.pleaseChoose')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :label="$t('message.laborMange.awards')+$t('message.laborMange.designation')"
              v-if="activeName != 'badness'"
              prop="awardName"
            >
              <el-input
                :disabled="currentType == 'details'"
                v-model="addEditInfo.awardName"
                :placeholder="$t('message.workType.placeholder')"
              ></el-input>
            </el-form-item>
            <el-form-item v-else :label="$t('message.laborMange.orderOfSeverity')" prop="seriousGrade">
              <el-select
                :disabled="currentType == 'details'"
                v-model="addEditInfo.seriousGrade"
                :placeholder="$t('message.laborMange.pleaseChoose')"
              >
                <el-option :label="$t('message.laborMange.notSerious')" :value="1"> </el-option>
                <el-option :label="$t('message.laborMange.seriousness')" :value="2"> </el-option>
                <el-option :label="$t('message.laborMange.verySerious')" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="activeName == 'badness' ? $t('message.laborMange.occurrenceEvent') : $t('message.laborMange.rewardFor')"
              prop="reason"
            >
              <el-input
                :disabled="currentType == 'details'"
                type="textarea"
                style="width: 320px"
                :rows="2"
                :placeholder="$t('message.laborMange.placeholder2')"
                maxlength="100"
                v-model="addEditInfo.reason"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              :label="activeName == 'badness' ? $t('message.laborMange.personnelInvolved') :  $t('message.laborMange.incentiveCrew') "
              prop="workerId"
            >
              <el-select
                :disabled="currentType == 'details'"
                v-model="addEditInfo.workerId"
                filterable
                :placeholder="$t('message.laborMange.pleaseChoose')"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.workerName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('message.laborMange.remark')" prop="remarks">
              <el-input
                :disabled="currentType == 'details'"
                type="textarea"
                style="width: 320px"
                :rows="2"
                :placeholder="$t('message.laborMange.placeholder2')"
                maxlength="100"
                v-model="addEditInfo.remarks"
              >
              </el-input>
            </el-form-item>

            <el-form-item :label="$t('message.laborMange.accessory')" prop="fileUrl">
              <el-upload
                v-if="currentType != 'details'"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                multiple
                :file-list="fileList"
                :limit="5"
                name="files"
              >
                <el-button size="small" type="primary" plain
                  >{{$t('message.laborMange.clickOnTheUpload')}}</el-button
                >
              </el-upload>
              <div v-else>
                <div
                  v-if="fileList.length > 0"
                  v-for="(item, index) in fileList"
                  :key="index"
                  class="accessory"
                  @click="handlePreview({ url: item.url })"
                >
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="dialog-footer" v-show="currentType != 'details'">
            <el-button
              class="cancleBtn"
              @click="dialogVisible = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.personnelPosition.cancel") }}
            </el-button>
            <el-button
              type="primary"
              @click="saveInfoData"
              icon="el-icon-circle-check"
              size="medium"
              >{{ $t("message.personnelPosition.determine") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>

    <!-- //查看大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="showBigImg">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getAssessmentListApi,
  getLaborManagementInfoListApi,
  addWorkerAssessmentInfoApi,
  editWorkerAssessmentInfoApi,
  deleteWorkerAssessmentInfoApi,
} from "@/assets/js/api/laborPerson";
export default {
  data() {
    return {
      projectSn: "",
      uploadUrl: "",
      fileUrl: "",
      activeName: "rewards", //tab切换
      seekForm: {
        searchName: "",
      }, // 查询条件
      seriousGrade: "",
      pagInfo: {
        //公用分页
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],

      currentType: "add", //弹窗的 新增 删除 编辑 详情
      dialogVisible: false, //弹窗
      addEditTitle: this.$t("message.laborMange.newRewardInfo"),
      //弹窗信息
      addEditInfo: {
        awardName: "",
        eventTitle: "",
        eventTime: "",
        eventType: 2, // == 1 不良记录，2 奖励记录，
        seriousGrade: 1,
        fileUrl: "",
        reason: "",
        remarks: "",
        workerId: "",
      },
      addEditRules: {
        eventTitle: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
        eventTime: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "change",
          },
        ],
        workerId: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "change",
          },
        ],
      }, //弹窗校验
      fileList: [], //附件

      options: [],

      //查询大图
      showBigImg: false,
      dialogImageUrl: "",
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getAssessmentList();
    this.getLaborInfoList();
  },
  methods: {
    showImg(src) {
      window.open(src);
    },
    //获取 不良 奖励 记录列表信息   eventType == 1 不良记录，2 奖励记录，
    getAssessmentList() {
      if (this.activeName == "rewards") {
        delete this.seekForm.seriousGrade;
        this.seekForm.eventType = 2;
      } else {
        this.seekForm.eventType = 1;
        this.seekForm.seriousGrade = this.seriousGrade;
      }
      let data = this.seekForm;
      data.pageNo = this.pagInfo.pageNo;
      data.pageSize = this.pagInfo.pageSize;
      data.projectSn = this.projectSn;
      data.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
      getAssessmentListApi(data).then((res) => {
        if (res.code == 200) {
          let valueArr = res.result.records;

          if (valueArr.length > 0) {
            for (let i = 0; i < valueArr.length; i++) {
              valueArr[i].fileList = [];
              if (valueArr[i].fileUrl) {
                valueArr[i].fileList = JSON.parse(valueArr[i].fileUrl);
              } else {
                valueArr[i].fileList = [];
              }
            }
          }
          setTimeout(() => {
            this.tableList = valueArr;
          }, 200);
          this.pagInfo.total = res.result.total;
        }
      });
    },

    //获取 人员下拉 奖励、不良
    getLaborInfoList() {
      let data = {
        projectSn: this.projectSn,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      };
      getLaborManagementInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.options = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //切换Tab记录类型
    handleClick(val) {
      this.activeName = val.name;
      this.pagInfo = {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      if (this.activeName == "rewards") {
        this.addEditTitle = this.$t("message.laborMange.newRewardInfo");
        this.addEditInfo.eventType = 2;
        this.seekForm.searchName = "";
        this.seriousGrade = "";
      } else {
        this.addEditInfo.eventType = 1;
        this.seriousGrade = "";
        this.seekForm.searchName = "";
        this.addEditTitle =this.$t("message.laborMange.add")+this.$t("message.laborMange.badRecord");
      }

      this.getAssessmentList();
    },

    //查询按钮
    onSubmit() {
      this.getAssessmentList();
    },

    //新增不良记录，奖励记录按钮
    addInfoBtn() {
      this.dialogVisible = true;
      this.currentType = "add";
      this.addEditInfo = {
        awardName: "",
        eventTitle: "",
        eventTime: "",
        eventType: 2, // == 1 不良记录，2 奖励记录，
        seriousGrade: 1,
        fileUrl: "",
        reason: "",
        remarks: "",
        workerId: "",
      };
      this.fileList = [];
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate();
      }, 200);
      if (this.activeName == "rewards") {
        this.addEditTitle = this.$t("message.laborMange.newRewardInfo");
        this.addEditInfo.eventType = 2;
      } else {
        this.addEditInfo.eventType = 1;
        this.addEditTitle = this.$t("message.laborMange.add")+this.$t("message.laborMange.badRecord");
      }
    },

    //编辑按钮
    editInfoBtn(val) {
      this.addEditInfo = val;
      if (val.fileUrl) {
        this.fileList = JSON.parse(val.fileUrl);
      } else {
        this.fileList = [];
      }

      this.dialogVisible = true;
      this.currentType = "edit";
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate();
      }, 200);
      if (this.activeName == "rewards") {
        this.addEditTitle = this.$t("message.laborMange.edit")+this.$t("message.laborMange.rewardInfo");
      } else {
        this.addEditTitle = this.$t("message.laborMange.edit")+this.$t("message.laborMange.badRecord");
      }
    },

    //详情按钮
    detailInfoBtn(val) {
      this.addEditInfo = val;
      if (val.fileUrl) {
        this.fileList = JSON.parse(val.fileUrl);
      } else {
        this.fileList = [];
      }
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate();
      }, 200);

      this.dialogVisible = true;
      this.currentType = "details";
      if (this.activeName == "rewards") {
        this.addEditTitle = this.$t("message.laborMange.rewardInfo")+this.$t("message.laborMange.details");
      } else {
        this.addEditTitle = this.$t("message.laborMange.badRecord")+this.$t("message.laborMange.details");
      }
    },

    //删除按钮
    deleteInfoBtn(val) {
      this.$confirm(this.$t("message.laborMange.deleteHint"), this.$t("message.laborMange.hint"), {
        confirmButtonText: this.$t("message.laborMange.confirm"),
        cancelButtonText: this.$t("message.laborMange.cancel"),
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          deleteWorkerAssessmentInfoApi(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("message.laborMange.deleteSuccess"),
              });
              this.getAssessmentList();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },

    //点击文件时
    handlePreview(file) {
      this.showBigImg = true;
      this.dialogImageUrl = this.fileUrl + file.url;
    },

    //附件删除成功
    handleRemove(file) {
      let url = file.url;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          //删除数据
          this.fileList.splice(i, 1);
        }
      }
    },

    //上传附件 成功
    handleSuccess(res, file) {
      let data = { name: res.data[0].filename, url: res.data[0].imageUrl };
      this.fileList.push(data);
    },

    //新增 编辑 保存
    saveInfoData() {
      this.$refs.addEditForm.validate((valid) => {
        if (valid) {
          let data = this.addEditInfo;
          data.fileUrl =
            this.fileList.length > 0 ? JSON.stringify(this.fileList) : "";
          data.projectSn = this.projectSn;
          if (data.fileList) {
            delete data.fileList;
          }
          //奖励记录
          if (this.activeName == "rewards") {
            data.eventType = 2;
            delete data.seriousGrade;
            //不良记录
          } else {
            data.eventType = 1;
          }
          if (this.currentType == "add") {
            //新增
            addWorkerAssessmentInfoApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success(res.message);
                this.getAssessmentList();
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            //编辑
            editWorkerAssessmentInfoApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success(res.message);
                this.getAssessmentList();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //切换条数
    sizeChange(val) {
      this.pagInfo.pageSize = val;
    },
    //切换页数
    currentChange(val) {
      this.pagInfo.pageNo = val;
    },
  },
};
</script>
<style lang="less" scoped>
.assessmentCentent {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.rewards_wrap {
  width: 100%;
}
.badness_wrap {
  width: 100%;
}
.accessory {
  cursor: pointer;
}
</style>