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

<template>
  <div class="dialog-moveto">
    <el-dialog
      title="移动到"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="form">
        <el-form
          label-width="77px"
          :rules="rules"
          :model="addForm"
          ref="form"
          class="ele-form-search"
        >
          <el-form-item label="设备分类" label-width="100px" prop="id">
            <template>
              <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>
            </template>
          </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 { changeSubstanceCateId } from '@/api/ledgerAssets';
  import { getTreeByPid } from '@/api/classifyManage';
  export default {
    data() {
      return {
        dialogVisible: false,
        addForm: {},
        loading: false,
        checkoutArr: [],
        rules: {
          id: [{ required: true, message: '请选择设备分类', trigger: 'blur' }]
        },
        list: []
      };
    },
    methods: {
      submit() {
        this.$refs.form.validate(async (flag) => {
          if (flag) {
            try {
              this.loading = true;
              const paramsArr = this.checkoutArr.map((item) => {
                return { categoryLevelId: this.addForm.id, id: item.id };
              });
              console.log(paramsArr);
              const res = await changeSubstanceCateId(paramsArr);
              this.$message.success('成功！');
              this.dialogVisible = false;
              this.$emit('success');
            } finally {
              this.loading = false;
            }
          } else {
            return false;
          }
        });
      },

      open(arr, current) {
        this.addForm = {};
        this.dialogVisible = true;
        this.checkoutArr = arr;
        this.getTreeData(current);
      },
      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>