update 完成授权额外数据

Web/src/pages/system/user/orgForm.vue

@@ -1,3 +1,116 @@
 <template>
-  <div></div>
+  <a-modal
+    :confirmLoading="confirmLoading"
+    :visible="visible"
+    @cancel="onCancel"
+    @ok="onOk"
+    class="yo-modal-form"
+    title="授权额外数据"
+  >
+    <a-form-model class="yo-form" ref="form">
+      <a-spin :spinning="loading">
+        <a-icon slot="indicator" spin type="loading" />
+        <div class="yo-form-group">
+          <a-form-model-item class="yo-form--fluid">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="orgList"
+              placeholder="请选择机构"
+              search-placeholder="请检索"
+              tree-checkable
+              v-model="orgs"
+            />
+          </a-form-model-item>
+        </div>
+      </a-spin>
+    </a-form-model>
+  </a-modal>
 </template>
+<script>
+import { TreeSelect } from 'ant-design-vue';
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+export default {
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+
+      loading: false,
+
+      id: '',
+      orgs: [],
+      orgList: [],
+      SHOW_PARENT,
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 从外部调用打开本窗口
+     */
+    async onOpen(record) {
+      this.visible = true;
+      this.id = record.id;
+      this.$nextTick(() => {
+        this.onInit();
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 点击保存时的操作
+     */
+    onOk() {
+      this.confirmLoading = true;
+      this.$api
+        /** !!此处必须修改调用的接口方法 */
+        .sysUserGrantData({
+          id: this.id,
+          grantOrgIdList: this.orgs,
+        })
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('授权成功');
+            this.onCancel();
+            this.$emit('ok');
+          }
+        })
+        .finally(() => {
+          this.confirmLoading = false;
+        });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.visible = false;
+      setTimeout(() => {
+        this.orgs = [];
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgList = await this.onLoadOrgList();
+      this.orgs = await this.onLoadOrg();
+      this.loading = false;
+    },
+
+    onLoadOrgList() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadOrg() {
+      return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
+        return data;
+      });
+    },
+  },
+};
+</script>