kd-aiot-frontend-eom/src/views/salesServiceManagement/workOrder/components/declarationDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :visible.sync="visibleDialog"
    :title="title"
    :close-on-click-modal="false"
    width="85%"
    append-to-body
    @close="handleClose"
    :maxable="true"
  >
    <el-form ref="form" :model="addForm" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item
            label="实际起始时间"
            prop="time"
            :rules="{
              required: true,
              message: '实际起始时间',
              trigger: 'change'
            }"
          >
            <el-date-picker
              style="width: 100%"
              v-model="addForm.time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="实际开始日期"
              end-placeholder="实际结束日期"
              :disabled="type == 'view'"
              @change="getTime"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="实际售后时长" prop="inFactDuration">
            <el-input v-model="addForm.inFactDuration" :disabled="true">
              <template slot="append">min</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件" prop="attachments">
            <fileMain
              v-model="addForm.attachments"
              :type="type == 'view' ? 'view' : 'add'"
            ></fileMain>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="故障现象" prop="faultPhenomenon">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="addForm.faultPhenomenon"
              :disabled="type == 'view'"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="故障原因" prop="faultReason">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="addForm.faultReason"
              :disabled="type == 'view'"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="维修过程" prop="maintenanceProcess">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="addForm.maintenanceProcess"
              :disabled="type == 'view'"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <info ref="infoRef" type="view" :isPurchaseNeed="false"></info>
        </el-col>
        <el-col :span="24">
          <header-title title="方案" style="margin-top: 10px"></header-title>
          <spareParts
            ref="sparePartsRef"
            :type="type == 'edit' ? 'edit' : 'view'"
          ></spareParts>
        </el-col>
        <el-col :span="8" v-if="type=='view'">
          <el-form-item label="报工时间" prop="acceptTime">
            <el-input
              v-model="addForm.acceptTime"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"  v-if="type=='view'">
          <el-form-item label="报工人" prop="executeUserName">
            <el-input
              v-model="addForm.executeUserName"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"  v-if="type=='view'">
          <el-form-item label="验收人" prop="accepterUserName">
            <el-input
              v-model="addForm.accepterUserName"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"  v-if="type=='view'">
          <el-form-item label="验收时间" prop="accepterTime">
            <el-input
              v-model="addForm.accepterTime"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8"  v-if="type=='view'">
          <el-form-item label="验收意见" prop="accepterRemark">
            <el-input
              v-model="addForm.accepterRemark"
              :disabled="true"
            type="textarea"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitAdd" v-if="type == 'report'"
        >提交</el-button
      >
      <el-button type="primary" @click="submitAdd" v-if="type == 'edit'"
        >保存</el-button
      >
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import fileMain from '@/components/addDoc/index.vue';
  import {
    reportWorkingSalesWorkOrder,
    updateScheme,
    getSalesWorkOrderById
  } from '@/api/salesServiceManagement/index';
  import spareParts from '@/views/salesServiceManagement/components/sparePartsList.vue';
  import info from '@/views/salesServiceManagement/components/info.vue';
  export default {
    props: {},
    components: {
      fileMain,
      spareParts,
      info
    },
    watch: {},
    computed: {},
    data() {
      return {
        title: '',
        visibleDialog: false,
        addForm: {
          id: '',
          time: [],
          attachments: [],
          reason: ''
        },
        row: {},
        type: ''
      };
    },
    created() {},
    methods: {
      open(row, type) {
        this.visibleDialog = true;
        this.type = type;
        this.title = type == 'edit' ? '修改' : type == 'view' ? '详情' : '报工';
        this.getDetail(row);
      },
      async getDetail(row) {
        const res = await getSalesWorkOrderById(row.id);
        this.addForm = res;
        if (this.addForm.acceptTime) {
          this.$set(this.addForm, 'time', [
            this.addForm.acceptTime,
            this.addForm.finishTime
          ]);
        }
        this.$nextTick(() => {
          this.$refs.infoRef.init(res.afterSalesDemandVO);
          this.$refs.sparePartsRef.setTableValue(res?.costListVOS || []);
        });
      },
      async submitAdd() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            let data = {
              acceptTime: this.addForm.time?.[0],
              finishTime: this.addForm.time?.[1],
              attachments: this.addForm.attachments,
              maintenanceProcess: this.addForm.maintenanceProcess,
              faultPhenomenon: this.addForm.faultPhenomenon,
              faultReason: this.addForm.faultReason,
              inFactDuration: this.addForm.inFactDuration,
              id: this.addForm.id,
              costListVOS: this.$refs.sparePartsRef.getTableValue()
            };
            let api =
              this.type == 'edit' ? updateScheme : reportWorkingSalesWorkOrder;
            await api(data).then((res) => {
              if (!res) return;
              this.$message.success('操作成功');
              this.visibleDialog = false;
              this.$emit('reload');
            });
          } else {
            return false;
          }
        });
      },
      getTime() {
        if (this.addForm.time?.length) {
          this.$set(
            this.addForm,
            'inFactDuration',
            parseInt(
              (new Date(this.addForm.time[1]).getTime() -
                new Date(this.addForm.time[0]).getTime()) /
                60000
            )
          );
        }
      },
      handleClose() {
        this.visibleDialog = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dialog_top {
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    span {
      margin-left: 50px;
    }

    .name {
      font-weight: 800;
      color: #40a9ff;
    }
  }

  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  .btns {
    text-align: right;
    // margin: 10px 0;
  }

  .main_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>