kd-aiot-frontend-fm/src/views/doc/components/folder-edit.vue

<!-- 机构编辑弹窗 -->
<template>
  <ele-modal
    width="420px"
    :visible="showFolderEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="type == 'edit' ? '修改' : '添加'"
    append-to-body
    @close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="文件夹名称：" prop="name">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.name"
              placeholder="文件夹名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细描述：" prop="remark">
            <el-input
              type="textarea"
              clearable
              :maxlength="20"
              v-model="form.remark"
              placeholder="详细描述"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="位置：" prop="parentId">
            <el-cascader
              style="width: 100%"
              v-model="form.parentId"
              :options="folderList"
              :disabled="this.type == 'edit'"
              :props="{
                value: 'id',
                label: 'name',
                children: 'sonDirectoryList',
                emitPath: false,
                checkStrictly: true,
                disabled: 'disabled'
              }"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="密级:" prop="secretLevel">
            <el-select v-model="form.secretLevel" style="width: 100%">
              <el-option
                v-for="item in secretLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button type="primary" :loading="loading" @click="save">
        确认
      </el-button>
      <el-button @click="cancel()">取消</el-button>
    </template>
  </ele-modal>
</template>

<script>
import { directorySaveAPI, directoryUpdateAPi } from '@/api/doc-manage';
import { setFolderList } from '../util.js';
import { secretLevelList } from '@/enum/dict';

export default {
  components: {},

  data() {
    const defaultForm = {
      name: '',
      type: '',
      parentId: '',
      remark: '',
      secretLevel: 1
    };
    return {
      defaultForm,
      responsibleName: '',
      showFolderEditFlag: false,
      type: '',
      // 表单数据
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        parentId: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      folderList: [],
      // 提交状态
      loading: false,
      secretLevelList
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  props: {
    fileType: ''
  },
  methods: {
    open(type, value, folderList) {
      this.type = type;
      this.showFolderEditFlag = true;
      if (type == 'edit') {
        this.form = value;
      } else {
        this.form.parentId = value.id;
      }
      this.folderList = JSON.parse(JSON.stringify(folderList));
      setFolderList(this.folderList); //权限过滤
    },

    cancel() {
      this.form = { ...this.defaultForm };
      this.$refs.form.clearValidate();
      this.showFolderEditFlag = false;
    },
    /* 保存编辑 */
    async save() {
      if (!(await this.formValidate())) return false;

      let form = {
        ...this.form
      };
      this.loading = true;
      const data = {
        ...form,
        parentId: this.form.parentId || 0
      };
      if (this.type != 'edit') {
        delete data.id;
        data.type = this.fileType;
      }
      const saveOrUpdate =
        this.type == 'edit' ? directoryUpdateAPi : directorySaveAPI;
      // console.log(this.type)
      // return
      saveOrUpdate(data)
        .then((msg) => {
          this.loading = false;
          // this.$message.success('新建成功');
          this.cancel();
          this.$emit('done', data.id?data:'isDefaultExpandedKeys');
        })
        .catch((e) => {
          this.loading = false;
          // this.$message.error(e.message);
        });
    },
    formValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    }
  }
};
</script>