kd-aiot-frontend-eom/src/views/salesServiceManagement/accessory/components/accessoryDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addRepairNotesDialog"
    :title="title"
    :close-on-click-modal="false"
    width="85%"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="accessoryFormRef" :model="form" label-width="100px">
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>
      <el-row>
        <el-col :span="6">
          <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="name"
            :rules="{
            required: true,
            message: '请选择工单',
            trigger: 'change'
          }"
          >
            <el-input
              v-model="form.name"
              :disabled="type == 'view'"
              @click.native="handHead"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="领用部门"
            prop="receivingDeptId"
            :rules="{
              required: true,
              message: '请输入领用部门',
              trigger: 'change'
            }"
          >
            <el-select
              style="width: 100%;"
              v-model="form.receivingDeptId"
              disabled
              placeholder="请选择"
            >
              <el-option
                v-for="item in loginChangeGroupVOList"
                :key="item.groupId"
                :label="item.groupName"
                :value="item.groupId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="领用人"
            prop="recipientId"
            :rules="{
              required: true,
              message: '请输入领用人',
              trigger: 'change'
            }"
          >
            <el-select style="width: 100%;" v-model="form.recipientId" disabled placeholder="请选择">
              <el-option
                v-for="item in loginChangeRoleVOList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="使用时间:" prop="usageTime">
            <el-date-picker
              style="width: 100%"
              v-model="form.usageTime"
              type="date"
              placeholder="选择"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="type == 'view'"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="使用部门"
            prop="useDeptId"
            :rules="{
              required: true,
              message: '请选择部门',
              trigger: 'change'
            }"
          >
            <deptSelect
              v-model="form.useDeptId"
              :disabled="type == 'view'"
              @changeGroup="searchDeptNodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="使用人"
            prop="userId"
            :rules="{
              required: true,
              message: '请选择使用人',
              trigger: 'change'
            }"
          >
            <el-select
              :disabled="type == 'view'"
              v-model="form.userId"
              size="small"
              style="width: 100%"
              filterable
              @change="changeUser"
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用途:">
            <el-input :disabled="type == 'view'" v-model="form.purpose" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 配件信息 -->
      <spareInfo ref="spareInfoRef" :types="type" :detailList="detailList" v-if="addRepairNotesDialog" />
    </el-form>
    <workOrderList ref="workOrderListRef" @changeSelect="changeSelect" />
    <div slot="footer" class="footer">
      <el-button v-if="type != 'view'" type="primary" @click="save">保存</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import workOrderList from './workOrderList.vue';
import spareInfo from './spareInfo.vue';
import { getUserPage } from '@/api/system/organization';
import {
  accessorySave,
  accessoryUpdate
} from '@/api/salesServiceManagement/index';

export default {
  data() {
    return {
      title: '新增',
      addRepairNotesDialog: false,
      type: 'add',
      form: {},
      loginChangeRoleVOList: [],
      executorList: [], // 执行人列表
      detailList: []
    };
  },
  components: { workOrderList, spareInfo, deptSelect },
  computed: {
    // 部门下拉
    loginChangeGroupVOList() {
      return this.$store.state.user?.info?.loginChangeGroupVOList;
    }
  },
  methods: {
    init(row, type) {
      let currentUser = JSON.parse(sessionStorage['currentUser']);
      this.form.receivingDeptId = currentUser.currentGroupId; // 部门id
      this.roleVOListData();
      this.addRepairNotesDialog = true;
      this.type = type;
      this.title = type == 'add' ? '新增' : type == 'view' ? '详情' : '修改';
      if (row?.id) {
        this.getDetail(row);
      } else {
        this.form.recipientId = currentUser.currentRoleId; // 领用人Id
        // 下拉数据 name 赋值
        this.echoData();
      }
    },
    getDetail(row) {
      const params = { groupId: row.useDeptId };
      this.getUserList(params);
      this.$set(this.form, 'code', row.code);
      this.$set(this.form, 'name', row.name);
      this.$set(this.form, 'receivingDeptId', row.receivingDeptId);
      this.$set(this.form, 'recipientId', row.recipientId);
      this.$set(this.form, 'usageTime', row.usageTime);
      this.$set(this.form, 'useDeptId', row.useDeptId);
      this.$set(this.form, 'userId', row.userId);
      this.$set(this.form, 'purpose', row.purpose);
      this.form.id = row.id;
      this.form.receivingDeptName = row.receivingDeptName;
      this.form.recipientName = row.recipientName;
      this.form.useDeptName = row.useDeptName;
      this.form.userName = row.userName;
      this.form.repairId = row.repairId;
      this.detailList = row.details;
    },
    // 领用部门/领用人 name 赋值
    echoData() {
      const depObj = this.loginChangeGroupVOList.find(
        (item) => item.groupId === this.form.receivingDeptId
      );
      const roleObj = this.loginChangeRoleVOList.find(
        (item) => item.roleId === this.form.recipientId
      );
      this.form.receivingDeptName = depObj.groupName;
      this.form.recipientName = roleObj.roleName;
    },
    // 选择工单
    handHead() {
      if (this.type != 'view') {
        this.$refs.workOrderListRef.open();
      }
    },
    // 确认选择工单
    changeSelect(row) {
      this.$set(this.form, 'name', row.name);
      this.form.repairId = row.id;
    },
    // 角色下拉
    roleVOListData() {
      let arr = this.loginChangeGroupVOList.find((item) => {
        return item.groupId == this.form.receivingDeptId;
      })?.loginChangeRoleVOList;
      this.loginChangeRoleVOList = arr;
    },
    //选择部门(搜索)
    searchDeptNodeClick(info, data) {
      if (info) {
        // 根据部门获取人员
        this.form.useDeptName = data.name;
        const params = { groupId: info };
        this.getUserList(params);
        this.$set(this.form, 'userName', '');
        this.$set(this.form, 'userId', '');
      } else {
        this.form.useDeptId = null;
      }
    },
    // 获取审核人列表、巡点检人员
    async getUserList(params) {
      try {
        let data = { pageNum: 1, size: -1 };
        // 如果传了参数就是获取巡点检人员数据
        if (params) {
          data = Object.assign(data, params);
        }
        const res = await getUserPage(data);
        if (params) {
          this.executorList = res.list;
        }
      } catch (error) {}
    },
    // 选择使用人
    changeUser(val) {
      this.executorList.map((item) => {
        if (item.id == val) {
          this.form.userName = item.name;
        }
      });
    },
    save() {
      let details = this.$refs.spareInfoRef.getSpareData() || [];
      if (details.length == 0) {
        this.$message.warning('请最少添加一条配件信息');
        return;
      }
      let obj = JSON.parse(JSON.stringify(this.form));
      delete obj.code;
      this.$refs.accessoryFormRef.validate(async (valid) => {
        if (valid) {
          let data = {
            ...obj,
            details
          };
          const requestname =
            this.title == '新增' ? accessorySave : accessoryUpdate;
          const res = await requestname(data);
          if (res) {
            this.$message.success('操作成功');
            this.handleClose();
            this.$emit('refresh');
          }
        }
      });
    },
    handleClose() {
      this.addRepairNotesDialog = false;
      this.form = {};
      this.$refs.accessoryFormRef.resetFields();
      this.detailList = [];
    }
  }
};
</script>

<style>
</style>