TBA_GXPT/ruoyi-ui/src/views/service/apply/AeServiceApplyAudit.vue

<template>
  <el-dialog
    center
    title="审核服务申请"
    v-model="localVisible"
    @close="closeDialog"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="服务名称">
        <el-input v-model="form.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="申请说明" prop="applyNote">
        <el-input
          disabled
          v-model="form.applyNote"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
        ></el-input>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="form.unitName" disabled></el-input>
      </el-form-item>
      <el-form-item label="附件信息">
        <el-row
          style="
            background: #f2f6fc;
            border-radius: 4px;
            border-color: #dfe4ed;
            padding: 10px;
            border: 1px solid #dcdfe6;
          "
        >
          <!--             closable
            @close="deleteFile(file.id)" -->
          <el-tag
            v-for="file in form.fileList"
            :key="file.id"
            type="info"
            effect="plain"
          >
            <a :href="getUrl(file.path)" :download="file.name">
              {{ file.name }}
            </a>
          </el-tag>
        </el-row>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请时间" prop="applyTime">
            <el-date-picker
              v-model="form.applyTime"
              type="date"
              placeholder="申请时间"
              format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期时间" prop="applyExpire">
            <el-date-picker
              v-model="form.applyExpire"
              type="date"
              placeholder="到期时间"
              format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="审核说明" prop="approveNote">
        <el-input
          v-model="form.approveNote"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 8 }"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核" prop="applyState">
        <el-radio-group v-model="form.applyState">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-button size="small" type="primary" @click="onSubmit">
          审核
        </el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps(['dialogVisible']);
const emit = defineEmits(['update:dialogVisible']);

// 定义计算属性中转
const localVisible = computed({
  get: () => props.dialogVisible,
  set: (val) => emit('update:dialogVisible', val)
});
</script>
<script>
import {auditServiceApply, getServiceApply} from "@/api/service/apply.js";
import {deleteFile} from "@/api/service/file.js";

export default {
  props: ["dialogVisible", "id"],
  components: {},
  data() {
    return {
      form: {
        srvId: "",
        name: "",
        appId: "",
        applyTime: new Date(),
        applyExpire: "",
        approveNote: "",
        applyState: "",
        fileList: [],
      },
      rules: {
        srvName: [
          {
            required: true,
            message: "请填写信息，该属性为必填项",
            trigger: "blur",
          },
        ],
        applyTime: [
          {
            required: true,
            message: "请填写信息，该属性为必填项",
            trigger: "blur",
          },
        ],
        applyExpire: [
          {
            required: true,
            message: "请填写信息，该属性为必填项",
            trigger: "blur",
          },
        ],
        approveNote: [
          {
            required: true,
            message: "请填写信息，该属性为必填项",
            trigger: "blur",
          },
        ],
        applyState: [
          {
            required: true,
            message: "请填写信息，该属性为必填项",
            trigger: "blur",
          },
        ],
      },
      pickerOptions: {
        disabledDate: (time) => {
          let timeOptionRange = this.searchList.timeOptionRange;
          let seven = 3600 * 1000 * 24 * 6;
          if (timeOptionRange) {
            // /*选择的日期 与 当前日期 小于7天*/
            let current =
              new Date(new Date().toLocaleDateString()) -
              timeOptionRange.getTime();
            return (
              time.getTime() >
              timeOptionRange.getTime() +
              (current < seven ? current : seven) ||
              time.getTime() < timeOptionRange.getTime() - seven
            );
          } else {
            return time.getTime() > Date.now();
          }
        },
      },
    };
  },
  watch: {
    id(val) {
      if (val) {
        this.getApply(val);
      }
    },
  },
  methods: {
    getApply(id) {
      getServiceApply(id).then((r) => {
        this.form = r.data;
        if (this.form.applyState) {
          this.form.applyState = "1";
        }
      });
    },
    closeDialog() {
      this.$emit("close-dialog");
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          auditServiceApply(this.form).then(() => {
            this.$message({
              showClose: true,
              message: "审核成功",
              type: "success",
            });
            this.closeDialog();
          });
          return true;
        } else {
          return false;
        }
      });
    },
    deleteFile(id) {
      deleteFile(id).then(() => {
        this.$modal.msgSuccess("删除附件成功");
        this.getApply(this.form.id);
      });
    },
    getUrl(path) {
      return process.env.VUE_APP_BASE_API + path;
    },
  },
};
</script>
<style scoped>
.box {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 10px;
}

::v-deep .el-main {
  padding: 0 10px;
}
</style>