kd-aiot-frontend-eam/src/views/ledgerAssets/equipment/components/DialogMoveTo.vue

<template>
  <div class="dialog-moveto">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :fullscreen="fullscreen"
      class="fullscreen"
    >
      <template slot="title">
        <modalTitle
          :title="title"
          @setFullscreen="fullscreen = !fullscreen"
        ></modalTitle>
      </template>
      <div class="form">
        <el-form
          label-width="120px"
          :rules="rules"
          :model="addForm"
          ref="form"
          class="ele-form-search"
        >
          <el-form-item
            v-if="componentsType == 'move'"
            label="设备分类"
            label-width="100px"
            prop="id"
          >
            <el-select v-model="addForm.id" placeholder="请选择">
              <el-option
                v-for="item in list"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="componentsType == 'person'"
            label="片区负责人部门"
            prop="areaPersonInChargeGroupId"
          >
            <DeptSelect v-model="addForm.areaPersonInChargeGroupId" @input="getwhbm" />
          </el-form-item>
          <el-form-item v-if="componentsType == 'person'" label="片区负责人">
            <el-select v-model="addForm.areaPersonInChargeUserId" placeholder="请选择" filterable>
              <el-option
                v-for="item in personList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="personChange(item)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import modalTitle from '@/components/modalTitle.vue';
  import {
    changeSubstanceCateId,
    updateRepairUserAndGroup
  } from '@/api/ledgerAssets';
  import { getTreeByPid } from '@/api/classifyManage';
  import DeptSelect from '@/components/CommomSelect/dept-select.vue';
  import { getUserPage } from '@/api/system/organization';
  export default {
    components: { DeptSelect, modalTitle },
    data() {
      return {
        fullscreen: false,
        componentsType: '',
        dialogVisible: false,
        addForm: {
          areaPersonInChargePhone:'',
          areaPersonInChargeUserId:'',
          areaPersonInChargeGroupId:'',
        },
        loading: false,
        checkoutArr: [],
        rules: {
          id: [{ required: true, message: '请选择设备分类', trigger: 'blur' }],
          areaPersonInChargeGroupId: [
            { required: true, message: '请选择片区负责人部门', trigger: 'blur' }
          ]
        },
        list: [],
        title: '',
        personList: []
      };
    },
    methods: {
      async getwhbm() {
        if (!this.addForm.areaPersonInChargeGroupId) return;

        this.$set(this.addForm,'areaPersonInChargePhone','')
        this.$set(this.addForm,'areaPersonInChargeUserId','')
        let data = await getUserPage({
          pageNum: 1,
          size: 9999,
          groupId: this.addForm.areaPersonInChargeGroupId
        });
        this.personList = data.list;
      },
      personChange(item) {
        this.addForm.areaPersonInChargePhone=item.phone
        console.log(item);
      },
      submit() {
        this.$refs.form.validate(async (flag) => {
          if (flag) {
            try {
              this.loading = true;
              if (this.componentsType == 'move') {
                const paramsArr = this.checkoutArr.map((item) => {
                  return { categoryLevelId: this.addForm.id, id: item.id };
                });
                console.log(paramsArr);
                await changeSubstanceCateId(paramsArr);
              } else {
                const listId = this.checkoutArr.map((item) => {
                  return item.id;
                });
                const newObj = {
                  ...this.addForm,
                  id: listId
                };
                console.log(newObj);
                await updateRepairUserAndGroup(newObj);
              }
              this.$message.success('成功！');
              this.dialogVisible = false;
              this.$emit('success', true);
            } finally {
              this.loading = false;
            }
          } else {
            return false;
          }
        });
      },

      open(arr, current, type) {
        this.addForm = {};
        this.dialogVisible = true;
        this.componentsType = type;
        this.checkoutArr = arr;
        if (type === 'move') {
          this.getTreeData(current);
          this.title = '移动到';
        } else {
          this.title = '批量设置片区负责人';
        }
      },
      async getTreeData(current) {
        const res = await getTreeByPid(4);
        if (res.code == 0) {
          this.list = [];
          console.log(current);
          console.log('==res.data', res.data);
          res.data.forEach((e) => {
            if (e.id == current.parentId) {
              e.children.forEach((item) => {
                if (item.id == current.preParentId) {
                  this.list = item.children;
                }
              });
            }
          });
        }
      },
      handleClose() {
        this.dialogVisible = false;
      }
    }
  };
</script>