update 用户授权区域

2021-04-30 16:06:52 +08:00
parent bf3210f861
commit 794116acdb
3 changed files with 34 additions and 20 deletions
--- a/Web/src/pages/system/user/dataForm.vue
+++ b/Web/src/pages/system/user/dataForm.vue
@@ -0,0 +1,141 @@
+<template>
+  <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 label="选择机构">
+            <a-tree-select
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="orgTreeData"
+              placeholder="请选择机构"
+              search-placeholder="请检索"
+              tree-checkable
+              v-model="orgs"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="区域">
+            <a-tree-select
+              :replace-fields="{ title: 'name', value: 'code', children: 'children' }"
+              :show-checked-strategy="SHOW_PARENT"
+              :tree-data="arerTreeData"
+              placeholder="请区域"
+              search-placeholder="请检索"
+              tree-checkable
+              v-model="areas"
+            />
+          </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: [],
+      orgTreeData: [],
+
+      areas: [],
+      arerTreeData: [],
+
+      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,
+          grantAreaCodeList: this.areas,
+        })
+        .then(({ success }) => {
+          if (success) {
+            this.$message.success('授权成功');
+            this.onCancel();
+            this.$emit('ok');
+          }
+        })
+        .finally(() => {
+          this.confirmLoading = false;
+        });
+    },
+
+    /**
+     * 必要的方法
+     * 关闭窗口时的操作
+     */
+    onCancel() {
+      this.visible = false;
+      setTimeout(() => {
+        this.orgs = [];
+        this.areas = [];
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgTreeData = await this.onLoadOrgTreeData();
+      this.orgs = await this.onLoadOrg();
+
+      this.arerTreeData = await this.onLoadAreaTreeData();
+      this.loading = false;
+    },
+
+    onLoadOrgTreeData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadAreaTreeData() {
+      return this.$api.getAreaTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadOrg() {
+      return this.$api.sysUserOwnData({ id: this.id }).then(({ data }) => {
+        return data;
+      });
+    },
+  },
+};
+</script>