jhprjv2/ruoyi-ui/src/views/project/projectAuditinfo/approveMeasureDrawer.vue

<template>
  <div class="projectect-attendance-drawer">
    <el-drawer
      v-if="isOpen"
      :visible.sync="isOpen"
      ref="drawer"
      direction="rtl"
      @close="closeCallBack"
      size="50%"
    >
      <template slot="title">
        <div>{{ title + " 【处理审批】" }}</div>
      </template>
      <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="测量图片">
          <el-image
            ref="preview"
            v-for="(img, idx) in dataInfo.imageUrls.split(',')"
            :key="idx"
            :src="getImageUrl(img)"
            style="width: 120px; height: 120px; margin-right: 15px"
            @click="onPreview(img)"
          ></el-image>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="测量类型">
              <dict-tag
                :options="dict.type.project_measure_type"
                :value="dataInfo.measureType"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测量内容">
              <dict-tag
                :options="dict.type.project_measure_info_type"
                :value="dataInfo.measureInfo"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="测量部位">
              {{ dataInfo.measurePosition }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测量点位">
              {{ dataInfo.measurePointPosition }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质量专员">
              {{ dataInfo.qualityUserName }}
              <el-tag type="info" size="mini">{{ dataInfo.qualityUser }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监理专员">
              {{ dataInfo.superviseUserName }}
              <el-tag type="info" size="mini">{{ dataInfo.superviseUser }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="提交用户">
              {{ dataInfo.createBy }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提交单位">
              {{ dataInfo.deptName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="测量时间">
          <span>{{ parseTime(dataInfo.measureTime, "{y}-{m}-{d}") }}</span>
        </el-form-item>
        <el-form-item label="测量附件">
          <div v-for="(file, index) in dataInfo.measureFiles.split(',')" :key="index">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-paperclip"
              @click="handledownload(file)"
              >{{ file.substring(file.lastIndexOf("/") + 1) }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="测量结果" prop="measureResult">
          <el-radio
            v-model="form.measureResult"
            v-for="dict in dict.type.project_checking_result"
            :label="dict.value"
            :key="dict.value"
            border
            size="small"
            >{{ dict.label }}</el-radio
          >
        </el-form-item>
        <el-form-item label="审批意见" prop="comment">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入审批意见（200字内）"
            v-model="form.comment"
          />
        </el-form-item>
        <div style="text-align: center;margin-bottom:20px;">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form>
    </el-drawer>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="previewList"
      style="z-index: 2050"
    />
  </div>
</template>

<script>
import { getProjectMeasure, updateProjectMeasure } from "@/api/project/projectMeasure";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "approveMeasureDrawer",
  components: {
    ElImageViewer,
  },
  props: {
    closeCallBack: {
      type: Function,
    },
  },
  dicts: ["project_measure_type", "project_checking_result", "project_measure_info_type"],
  data() {
    return {
      showViewer: false,
      open: false,
      isOpen: false,
      dataInfo: {
        imageUrls: "",
      },
      title: "",
      form: {},
      rules: {
        measureResult: [{ required: true, message: "请选择测量结果", trigger: "blur" }],
        comment: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
          { max: 200, message: "审批意见最多200字符", trigger: "blur" },
        ],
      },
      // 遮罩层
      loading: true,
      previewList: [],
      fileTypes: ["pdf", "png", "jpg", "jpeg"],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    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 = options.typeName;
      this.isOpen = true;
      this.form = {};
      this.form.id = options.id;
      getProjectMeasure(options.id).then((res) => {
        this.dataInfo = res.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.isOpen = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 结果状态同步到审批状态
          let msg = "合格";
          if (this.form.measureResult == "1") {
            this.form.approveStatus = "4";
          } else {
            msg = "不合格";
            this.form.approveStatus = "3";
          }
          this.$confirm("是否确认审批" + msg + "?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.loading = true;
              updateProjectMeasure(this.form).then((res) => {
                this.$modal.msgSuccess("审批成功");
                this.loading = false;
                //关闭并刷新列表
                this.$refs.drawer.closeDrawer();
              });
            })
            .catch(() => {
              console.log("取消操作");
            });
        }
      });
    },
    handledownload(url) {
      let fileType = url.split(".");
      if (
        this.fileTypes.indexOf(fileType[fileType.length - 1].toLocaleLowerCase()) > -1
      ) {
        window.open(process.env.VUE_APP_BASE_API + url);
      } else {
        this.$download.resource(url);
      }
    },
  },
};
</script>