kd-aiot-frontend-eom/src/views/salesServiceManagement/cost/component/costDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="editRepairNotesDialog"
    :title="title"
    :close-on-click-modal="false"
    width="85%"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <div class="switch" v-if="type == 'view'">
      <div class="switch_left">
        <ul>
          <li
            v-for="item in tabOptions"
            :key="item.key"
            :class="{ active: activeComp == item.key }"
            @click="handleTag(item.key)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <el-form
      v-show="activeComp === 'main'"
      ref="recyleFormRef"
      :model="form"
      label-width="100px"
    >
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>
      <el-row>
        <el-col :span="8">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="工单名称:"
            prop="workOrderName"
            :rules="{
              required: true,
              message: '请选择工单',
              trigger: 'change'
            }"
          >
            <!--  :disabled="workOrderDis" -->
            <el-input
              v-model="form.workOrderName"
              :disabled="workOrderDis"
              @click.native="handHead"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原因">
            <el-input
              v-model="form.remarks"
              type="textarea"
              :rows="2"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <spareParts
        obtain="仓库"
        ref="sparePartsRef"
        :type="title == '详情' ? 'view' : 'edit'"
      ></spareParts>
    </el-form>
    <bpmDetail
      v-if="activeComp === 'bpm' && processInstanceId"
      :id="processInstanceId"
    ></bpmDetail>
    <template v-slot:footer>
      <el-button @click="handleClose" :loading="loading">取消</el-button>
      <el-button
        type="primary"
        v-if="type != 'view'"
        @click="save"
        :loading="loading"
        >确认</el-button
      >
    </template>
    <workOrderList ref="workOrderListRef" @changeSelect="changeSelect" />
  </ele-modal>
</template>

<script>
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import workOrderList from '@/views/salesServiceManagement/accessory/components/workOrderList.vue';
  import spareParts from '@/views/salesServiceManagement/components/sparePartsList.vue';
  import {
    costSave,
    costUpdate,
    salesrealcostinfo,
    getSalesWorkOrderById
  } from '@/api/salesServiceManagement/index';
  export default {
    props: {},
    components: {
      workOrderList,
      spareParts,
      bpmDetail
    },
    computed: {
      workOrderDis() {
        console.log(this.source, 'this.source 33');
        if (this.source != 0) {
          return true;
        }
        return this.type == 'view';
      }
    },
    data() {
      return {
        loading: false,
        title: '新增',
        editRepairNotesDialog: false,
        type: 'add',
        form: {
          remarks: '',
          workOrderName: ''
        },
        source: 0,
        activeComp: 'main',
        processInstanceId:'0',
        tabOptions: [
          { key: 'main', name: '发货单详情' },
          { key: 'bpm', name: '流程详情' }
        ]
      };
    },
    methods: {
      init(row, type) {
        this.editRepairNotesDialog = true;
        this.type = type;
        this.title = type == 'add' ? '新增' : type == 'edit' ? '编辑' : '详情';
        if (row?.id) {
          this.getDetail(row);
        }
      },
      async getDetail(data) {
        const res = await salesrealcostinfo(data.id);
        this.processInstanceId = res.processInstanceId;
        console.log(res, 'res 3333');
        this.$refs.sparePartsRef.setTableValue(res?.detailLst || []);
        this.$set(this.form, 'workOrderName', res.workOrderName);
        this.form.workOrderCode = res.workOrderCode;
        this.form.workOrderId = res.workOrderId;
        this.$set(this.form, 'remarks', res.remarks);
        this.form.id = data.id;
        this.source = res.source || 0;
        this.$set(this.form, 'code', res.code);
      },
      handleClose() {
        this.editRepairNotesDialog = false;
        this.form = {
          remarks: '',
          workOrderName: ''
        };
        this.$refs.recyleFormRef.resetFields();
        this.$refs.sparePartsRef.setTableValue([]);
        this.source = 0;
        this.$refs.workOrderListRef.current = {};
        this.$refs.workOrderListRef.radio = null;
      },
      async save() {
        let detailLst = this.$refs.sparePartsRef.getTableValue() || [];
        let totalPrice = this.$refs.sparePartsRef.totalPrice || 0;
        if (detailLst.length == 0) {
          this.$message.warning('请至少添加一条费用清单');
          return;
        }
        this.$refs.recyleFormRef.validate(async (valid) => {
          if (valid) {
            let data = {
              ...this.form,
              detailLst,
              totalPrice
            };
            try {
              this.loading = true;
              const requestName = this.type == 'add' ? costSave : costUpdate;
              const res = await requestName(data);
              this.loading = false;
              if (res) {
                this.$message.success('操作成功');
                this.handleClose();
                this.$emit('refresh');
              }
            } catch (err) {
              this.loading = false;
            }
          }
        });
      },
      // 选择工单
      handHead() {
        if (this.type != 'view') {
          let data = {
            name: this.form.workOrderName,
            code: this.form.workOrderCode,
            id: this.form.workOrderId
          };
          this.$refs.workOrderListRef.open(data);
        }
      },
      handleTag(val) {
        this.activeComp = val;
      },
      async changeSelect(row) {
        if (row.id == this.form.workOrderId) {
          return;
        }
        this.$set(this.form, 'workOrderName', row.name);
        this.$set(this.form, 'workOrderCode', row.code);
        this.form.workOrderId = row.id; // 工单id
        this.$refs.sparePartsRef.form.tableList = [];
        const res = await getSalesWorkOrderById(row.id);
        this.$refs.sparePartsRef.setTableValue(res.costListVOS || []);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .device_name {
    .el-select-dropdown__wrap {
      .el-select-dropdown__item {
        padding: 0 !important;
      }
    }

    .option_ {
      width: 100%;
      padding: 0 20px;
    }
  }
</style>