tobacco/bs-ui/src/views/task-distribut/send/other-task/components/AuditItem.vue

<template>
  <el-form
      ref="dialogForm"
      :model="dialogForm"
      class="demo-form-inline"
      label-width="180"
      size="small"
      :rules="rules"
    >
    <el-descriptions class="margin-top" :column="2" border size="medium">
      <template v-if="isAudit">
        <el-descriptions-item label="审核人机构">
          {{ dialogForm.checkUserDept || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="审核人">
          {{ dialogForm.checkUserName || '-' }}
        </el-descriptions-item>
        
        <template v-if="editAble()">
          <el-descriptions-item :span="2" label="审核信息">
            <el-form-item class="desc-form-item" label="" prop="checkInfo">
              <el-input v-model="dialogForm.checkInfo" type="textarea" placeholder="请输入审核信息" />
            </el-form-item>
          </el-descriptions-item>
        </template>
        <template v-else>
          <el-descriptions-item :span="2" label="审核结果">
            <el-tag v-if="dialogForm.status === '2'" type="success">通过</el-tag>
            <el-tag v-else-if="dialogForm.status === '-1'" type="danger">驳回</el-tag>
            <el-tag v-else type="info">未审核</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="审核信息">
            {{ dialogForm.checkInfo || '无' }}
          </el-descriptions-item>
        </template>
      </template>
      <template v-else>
        <el-descriptions-item label="反馈人机构">
          {{ dialogForm.userDept || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="反馈人">
          {{ dialogForm.userName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="反馈信息">
          <el-form-item v-if="editAble()" class="desc-form-item" label="" prop="taskDesc">
            <el-input v-model="dialogForm.taskDesc" type="textarea" placeholder="请输入反馈信息" />
          </el-form-item>
          <span v-else>{{ dialogForm.taskDesc || '无' }}</span>
        </el-descriptions-item>
      </template>
      <el-descriptions-item :span="2" v-if="editAble() || dialogForm.fileId">
        <template slot="label">
          <i class="el-icon-paperclip"></i>
          附件
        </template>
        <el-form-item class="desc-form-item" label="" prop="fileId">
          <FileUpload v-model="dialogForm.fileId" :readonly="!editAble()"></FileUpload>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
    <div v-if="editAble()" style="margin-top: 10px;">
      <template v-if="isAudit">
        <el-button type="primary" v-loading="saving" @click="preSubmit('2')">通过</el-button>
        <el-button type="danger" v-loading="saving" @click="preSubmit('-1')">驳回</el-button>
      </template>
      <template v-else>
        <el-button v-loading="saving" @click="preSubmit()">保存</el-button>
        <el-button type="primary" v-loading="saving" @click="preSubmit('1')">提交</el-button>
      </template>
    </div>
    
  </el-form>
</template>

<script>
// status; 0草稿， 1反馈，2通过，-1驳回， null：本地待提交的审核
import TableEditMixin from "@/mixins/table-edit-mixin";
// import { addFeedback, updateFeedback } from "";
// import { getDateStr } from "@/utils/util";
import FileUpload from "@/components/FileUpload";

export default {
  name: 'AuditItem',
  components: { FileUpload },
  mixins: [TableEditMixin],
  pageInfo: {
    defaultForm: {
    },
    updateApi: updateFeedback,
    addApi: addFeedback,
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isAudit() {
      // 是否审核流程，否则反馈流程
      return !this.dialogForm.status || this.dialogForm.status === '2' || this.dialogForm.status === '-1';
    }
  },
  data() {
    return {
      rules: {
        checkInfo: [
          { required: true, message: '请输入审核信息', trigger: 'blur' }
        ],
        taskDesc: [
          { required: true, message: '请输入反馈信息', trigger: 'blur' }
        ]
      },
      submitStatus: null,
    };
  },
  watch: {
    item: {
      handler(val) {
        this.dialogForm = {...this.$options.pageInfo.defaultForm, ...val};
        this.$nextTick(() => {
          this.$refs.dialogForm.clearValidate();
        });
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    editAble() {
      if (this.info.sdTaskOther?.status === '2') {
        // 办结的不可编辑
        return false;
      }
      return !this.dialogForm.status || this.dialogForm.status === '0';
    },
    preSubmit(status) {
      this.submitStatus = status;
      if (this.submitStatus === '1') {
        this.$confirm(`确定提交进行审核?`, '温馨提示', {
          type: 'warning'
        }).then(res => {
          this.dialogForm.feedbackTime = getDateStr();
          this.submitForm();
        });
        return;
      }
      if (this.submitStatus === '2') {
        this.$confirm(`确定通过审核?`, '温馨提示', {
          type: 'warning'
        }).then(res => {
          this.dialogForm.checkDate = getDateStr();
          this.submitForm();
        });
        return;
      }
      if (this.submitStatus === '-1') {
        this.$confirm(`确定驳回审核?`, '温馨提示', {
          type: 'warning'
        }).then(res => {
          this.dialogForm.checkDate = getDateStr();
          this.submitForm();
        });
        return;
      }
      this.submitForm();
    },
    combinDialogForm() {
      if (this.submitStatus) {
        return {
          ...this.dialogForm,
          status: this.submitStatus,
        };
      }
      return this.dialogForm;
    },
  }
}
</script>

<style lang="scss" scoped>
.desc-form-item {
  margin: 0;
}
</style>