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} {h}:{i}") }}</span>
            </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">
                <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: [],
      };
    },
    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.open = 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("取消操作");         
            });
          }
        });
      },
    },
  };
  </script>