soc_web/src/views/resumptionEvaluate/evaluatePlan/editPlanEvaluate.vue

<template>
  <div class="rule-type">
    <DialogCom
      @colse="onHide"
      :title="`外包评价${isEvaluate == 1 ? '查看' : ''}`"
      :visible.sync="isShow"
      width="1500px"
    >
      <!-- :visible.sync="isShow" -->
      <div class="page-body">
        <el-form
          :model="formData"
          size="small"
          ref="form"
          label-position="right"
          label-width="130px"
          label-prefix=":"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="外包评价名称:">
                {{ formData.evaluateName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价机构:">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价计划时间:">
                {{ formData.startTime + "-" }}{{ formData.endTime }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="状态:">
                {{ formData.status | filterStatus }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价周期:">
                {{ formData.evaluateCycle }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- tableData -->
        <div class="line_box">
          <div class="line"></div>
          <div class="titleEvaluate">
            {{ isEvaluate == 1 ? "评价记录" : "评价内容" }}
          </div>
        </div>

        <el-form v-if="isEvaluate == 0">
          <el-row v-for="(item, index) in tableData" :key="item.id">
            <el-col :span="24">
              <el-form-item
                class="formItemTitle"
                :label="`${index + 1}.${item.content}`"
              >
              </el-form-item>
            </el-col>
            <!-- 文本 -->
            <el-col :span="24" v-if="item.contentType == 1">
              <el-form-item label=" ">
                <el-input
                  type="textarea"
                  :rows="2"
                  :disabled="isEvaluate == '1'"
                  placeholder="请输入内容"
                  v-model="item.score"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 评分 -->
            <el-col :span="24" v-else>
              <el-form-item label=" ">
                <el-rate
                  :max="10"
                  v-model="item.score"
                  text-color="#ff9900"
                  show-score
                  score-template="{value}星"
                ></el-rate>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-else>
          <el-form v-for="(item, index) in tableDataContentVOS" :key="item.id">
            <el-card class="box-card">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="评价时间"
                    >{{ item.completeTime }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="评价人"
                    >{{ item.evaluateBy }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row
                v-for="sonItem in item.coreEvaluateTaskContentList"
                :key="sonItem.code"
              >
                <el-col :span="24">
                  <el-form-item
                    class="formItemTitle"
                    :label="`${sonItem.code}.${sonItem.content}`"
                  >
                  </el-form-item>
                </el-col>
                <!-- 文本 -->
                <el-col :span="24" v-if="sonItem.contentType == 1">
                  <el-form-item label=" ">
                    <span class="scoreText">
                      {{ sonItem.score }}
                    </span>
                  </el-form-item>
                </el-col>
                <!-- 评分 -->
                <el-col :span="24" v-else>
                  <el-form-item label=" ">
                    <el-rate
                      :max="10"
                      v-model="sonItem.score"
                      text-color="#ff9900"
                      show-score
                      score-template="{value}星"
                    ></el-rate>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="onSubmit" v-if="isEvaluate == '0'"
          >确定</el-button
        >
        <el-button @click="onHide">取消</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getEvaluateById,
  editEvaluate,
  getevaluateByid,
} from "@/api/core/evalulateTask.js";
export default {
  data() {
    return {
      isEvaluate: "",
      tableData: [],
      tableDataContentVOS: [],
      id: null,
      isShow: false,
      formData: {},
    };
  },

  filters: {
    filterStatus(val) {
      switch (val) {
        case "0":
          return "待完成";
          break;
        case "1":
          return "进行中";
          break;
        case "2":
          return "已完成";
          break;
        case "3":
          return "已逾期";
          break;
      }
    },
  },
  computed: {
    ...mapGetters(["orgId", "orgName"]),
  },
  mounted() {},

  methods: {
    async show(id = "", isEvaluate) {
      this.id = id;
      this.tableData = [];
      this.tableDataContentVOS = [];
      this.isEvaluate = isEvaluate + "";

      // isEvaluate 1 查看 0 评价
      if (isEvaluate == 1) {
        await getevaluateByid(id).then((res) => {
          let { code, msg, data } = res;
          if (code == 200) {
            Object.assign(this.formData, data);
            this.tableDataContentVOS = data.coreEvaluateTaskUserContentVOS;
            this.tableDataContentVOS.forEach((item) => {
              item.coreEvaluateTaskContentList.forEach((i) => {
                if (i.contentType == 2) {
                  i.score = +i.score;
                }
              });
            });
            console.log(this.tableDataContentVOS);
            delete this.formData.coreEvaluateTaskUserContentVOS;
          } else {
            this.$message.error(msg);
          }
        });
      } else {
        await getEvaluateById(id).then((res) => {
          let { code, msg, data } = res;
          if (code == 200) {
            Object.assign(this.formData, data);
            this.tableData = data.coreEvaluateContentList;
            delete this.formData.coreEvaluateContentList;
          } else {
            this.$message.error(msg);
          }
        });
      }

      this.isShow = true;
    },

    // 事件
    onHide() {
      this.$refs.form.resetFields();
      this.isShow = false;
      this.formData = {};

      this.tableData = [];
    },

    onSubmit() {
      console.log(this.tableData);
      let falg = false;
      this.tableData.forEach((item) => {
        if (!item.score) {
          falg = true;
        }
      });
      if (falg) {
        return this.$message.error("存在未评价的项,请检查!");
      }
      let obj = {
        id: this.formData.id,
        coreEvaluateTaskContentList: JSON.parse(JSON.stringify(this.tableData)),
      };
      obj.coreEvaluateTaskContentList.forEach((item) => {
        item.score = item.score + "";
      });

      editEvaluate(obj).then((res) => {
        let { code } = res;
        if (code == 200) {
          this.$emit("success");
          this.$message.success('评价成功')
          this.onHide();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
.line_box {
  display: flex;
  height: 20px;
  margin-bottom: 20px;
  .titleEvaluate {
    color: #008cd6;
    vertical-align: middle;
  }
  .line {
    height: 100%;
    width: 4px;
    margin-right: 10px;
    background-color: #008cd6;
  }
}
::v-deep.formItemTitle {
  .el-form-item__label {
    font-size: 20px !important;
    color: black;
  }
}
.box-card {
  margin-bottom: 20px;
  .scoreText {
    font-size: 20px !important;
  }
}

.form-item-comment {
  font-size: 12px;
  color: #999;
  height: 10px;
}
</style>