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="报工"
    :close-on-click-modal="false"
    width="85%"
    append-to-body
    @close="handleClose"
    :maxable="true"
  >
    <el-form ref="form" :model="addForm" label-width="100px">
      <el-form-item label="实际起始时间" prop="time">
        <el-date-picker
          v-model="addForm.time"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="实际开始日期"
          end-placeholder="实际结束日期"
          :disabled="type == 'view'"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="附件：" prop="attachments">
        <fileMain
          v-model="addForm.attachments"
          :type="type == 'view' ? 'view' : ''"
        ></fileMain>
      </el-form-item>
      <el-form-item label="备注：" prop="reason">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="addForm.reason"
          :disabled="type == 'view'"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <info ref="infoRef" type="view" :isPurchaseNeed="false"></info>

    <header-title title="方案"></header-title>
    <spareParts ref="sparePartsRef" :type="type"></spareParts>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="submitAdd" v-if="type != 'view'"
        >提交</el-button
      >
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import fileMain from '@/components/addDoc/index.vue';
  import { getSalesWorkOrderById } from '@/api/salesServiceManagement/index';
  import { reportWorkingSalesWorkOrder } 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: 'add'
      };
    },
    created() {},
    methods: {
      open(row, type) {
        this.visibleDialog = true;
        this.type = type;
        this.getDetail(row);
      },
      async getDetail(row) {
        console.log(row, 'row');
        const res = await getSalesWorkOrderById(row.id);
        this.addForm=res
        this.$nextTick(() => {
          this.$refs.infoRef.init(res.afterSalesDemandVO);
          this.$refs.sparePartsRef.setTableValue(res?.costListVOS || []);
        });
      },
      async submitAdd() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            await reportWorkingSalesWorkOrder({
              acceptTime: this.addForm.time[0],
              finishTime: this.addForm.time[1],
              attachments: this.addForm.attachments,
              id:this.addForm.id,
              reason: this.addForm.reason,
              costListVOS: this.$refs.sparePartsRef.getTableValue()
            }).then((res) => {
              if (!res) return;
              this.$message.success('操作成功');
              this.visibleDialog = false;
              this.$emit('reload');
            });
          } else {
            return false;
          }
        });
      },
      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>