首页
工单管理
合并请求
里程碑
探索
 通知469
 创建…
 个人信息和配置
 mt-fe-group / yudao-dev
取消关注
11
点赞
0
派生
0
代码
工单
0
合并请求
0
版本发布
0
百科
动态
 559 提交
 25 分支
 145 MiB
 分支: projects/mes-test
yudao-dev/src/views/equipment/base/repair/CustomDialogForm.vue
346 行
8.9 KiB
原始文件
永久链接
Blame
文件历史

<!--
    filename: dialogForm.vue
    author: liubin
    date: 2023-10-31 15:55:13
    description:
-->

<template>
  <el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="disabled" class="drawer"
    custom-class="mes-drawer" size="65%" @closed="$emit('destroy')">
    <small-title slot="title" :no-padding="true">
      {{ disabled ? '查看详情' : !dataForm.maintenanceStatus ? '修改' : '完成' }}
    </small-title>
    <div class="drawer-body flex">
      <div class="drawer-body__content">
        <el-form ref="form" :model="dataForm" label-width="100px" label-position="top" v-loading="formLoading">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="维修单号" prop="repairOrderNumber">
                <span>{{ dataForm.repairOrderNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备名称" prop="equipmentName">
                <span>{{ dataForm.equipmentName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维修工" prop="repairman">
                <span>{{ dataForm.repairman }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="故障发生时间" prop="faultTime">
                <span>{{ parseTime(dataForm.faultTime) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="故障级别" prop="faultLevel">
                <span>{{ getDictDataLabel('fault-level', dataForm.faultLevel) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="repairmanPhone">
                <span>{{ dataForm.repairmanPhone }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider style="margin-top: -10px" />

          <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
            {{ '设备维修信息' }}
          </small-title>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="维修开始时间" prop="maintenanceStartTime"
                :rules="[{ required: true, message: '维修开始时间不能为空', trigger: 'blur' }]">
                <el-date-picker v-model="dataForm.maintenanceStartTime" type="datetime" :disabled="disabled"
                  placeholder="请选择维修开始时间" value-format="timestamp" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修结束时间" prop="maintenanceFinishTime"
                :rules="[{ required: true, message: '维修结束时间不能为空', trigger: 'blur' }]">
                <el-date-picker v-model="dataForm.maintenanceFinishTime" type="datetime" :disabled="disabled"
                  placeholder="请选择维修开始时间" value-format="timestamp" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修方式" prop="repairMode"
                :rules="[{ required: true, message: '维修方式不能为空', trigger: 'blur' }]">
                <el-select :disabled="disabled" v-model="dataForm.repairMode" placeholder="请选择维修方式">
                  <el-option v-for="opt in getDictDatas('repair-mode')" :key="opt.value" :label="opt.label"
                    :value="opt.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="故障类型" prop="faultType">
                <el-select :disabled="disabled" v-model="dataForm.faultType" placeholder="请选择故障类型">
                  <el-option v-for="opt in getDictDatas('fault-type')" :key="opt.value" :label="opt.label"
                    :value="opt.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="故障明细" prop="faultDetail"
                :rules="[{ required: true, message: '故障明细不能为空', trigger: 'blur' }]">
                <!-- // 富文本 -->
                <editor v-model="dataForm.faultDetail" :read-only="disabled" :min-height="150" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="维修记录" prop="maintenanceDetail">
                <!-- // 富文本 -->
                <editor v-model="dataForm.maintenanceDetail" :read-only="disabled" :min-height="150" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="维修附件" prop="file">
                <FileUpload v-model="file" :limit="1" :f-name="fileName" :disabled="disabled" @name="setFileName" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="dataForm.remark" :placeholder="`请输入备注`" :disabled="disabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div v-if="!disabled" class="drawer-body__footer">
          <el-button style="" @click="goback()">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import SmallTitle from '../../base/alarm/Record/SmallTitle.vue';
import { getEqRepair, updateEqRepair } from '@/api/equipment/base/repair'
import Editor from "@/components/Editor";
import FileUpload from "@/components/FileUpload";
import { getDictDatas } from "@/utils/dict";
import { parseTime } from '@/utils/ruoyi'
import { getDictDataLabel } from '@/utils/dict';

export default {
  name: 'DialogForm',
  model: {
    prop: 'dataForm',
    event: 'update',
  },
  emits: ['update'],
  components: { SmallTitle, Editor, FileUpload },
  props: {
    // dataForm: {
    // 	type: Object,
    // 	default: () => ({}),
    // },
    // disabled: {
    // 	type: Boolean,
    // 	default: false
    // },
  },
  data() {
    return {
      formLoading: true,
      visible: false,
      disabled: false,
      dataForm: {},
      file: '',
      fileName: ''
    };
  },
  mounted() { },
  methods: {
    setFileName(val) {
      this.fileName = val
    },
    goback() {
      this.$emit('refreshDataList');
      this.visible = false;
    },
    goEdit() {
      this.disabled = false;
    },
    /** 模拟透传 ref  */
    validate(cb) {
      return this.$refs.form.validate(cb);
    },
    resetFields(args) {
      return this.$refs.form.resetFields(args);
    },
    initData() {
      this.file = ''
      this.fileName = ''
    },
    init(row, isdetail) {
      this.initData();
      this.disabled = isdetail || false;
      this.dataForm.id = row.id || undefined;
      this.visible = true;

      this.$nextTick(() => {
        this.$refs['form'].resetFields();

        if (this.dataForm.id) {
          // 获取设备维修
          getEqRepair(this.dataForm.id).then(response => {
            this.formLoading = false
            this.dataForm = response.data;
            this.dataForm.maintenanceStatus = row.maintenanceStatus || 0
            if (this.dataForm.files.length > 0) {
              this.file = this.dataForm.files[0].fileUrl
              this.fileName = this.dataForm.files[0].fileName
            }
          });
        } else {
          // if (this.urlOptions.isGetCode) {
          //   this.getCode()
          // }
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 修改的提交
        if (this.file) {
          const temp = this.file.split(',') // 获取文件个数
          let arry = []
          temp.forEach(item => {
            arry.push({
              fileName: this.fileName,
              fileType: 2,
              fileUrl: item
            })
          })
          this.dataForm.files = arry
        }
        if (this.dataForm.id) {
          updateEqRepair(this.dataForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.visible = false;
            this.$emit("refreshDataList");
          });
          return;
        }
        // 添加的提交
        // this.urlOptions.createURL(this.dataForm).then(response => {
        //   this.$modal.msgSuccess("新增成功");
        //   this.visible = false;
        //   this.$emit("refreshDataList");
        // });
      });
    },
  },
};
</script>

<style scoped>
.drawer>>>.el-drawer {
  border-radius: 8px 0 0 8px;
}

.drawer>>>.el-drawer__header {
  margin: 0;
  padding: 32px 32px 24px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 0px;
}

.small-title::before {
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 4px;
  height: 22px;
  border-radius: 1px;
  margin-right: 8px;
  background-color: #0b58ff;
}

.drawer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-body__content {
  flex: 1;
  /* background: #eee; */
  padding: 20px 30px;
  overflow-y: auto;
}

.drawer-body__footer {
  display: flex;
  justify-content: flex-end;
  padding: 18px;
}
</style>